PROWAREtech
CSS: Page Rotates on the Y-axis to Reveal Menu
3D animated, responsive, Y-axis rotating page reveals menu using only HTML and CSS.
This landing page has a very cool three-dimensional rotation of the page to reveal a menu. It can be designed for every page of the site. What's so novel about this is that it requires no JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cool Animated, Rotating Landing Page with Menu</title>
<style>
*,
*::before,
*::after{
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background-color: #369;
color: white;
font-size: 1vmin;
font-family: sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
perspective-origin: 0 50%;
perspective: 100vw;
}
main {
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
background-image: url(https://picsum.photos/id/41/1920/1080);
background-size: cover;
background-position: 0 center;
background-color: #333;
padding: 5vmax 1vmin 1vmin 1vmin;
text-shadow: 3px 3px rgba(0,0,0,0.5);
transform-origin: 0 50%;
}
#menu-toggle {
display: none;
}
main,
#menu-toggle ~ ul {
position: absolute;
transition: transform .5s ease-in-out, left .5s ease-in-out;
}
#menu-toggle + label {
display: block;
position: relative;
top: 0;
font-size: 3vmax;
line-height: 3vmax;
z-index: 1;
margin: 1.5vmin 0 0 1.5vmin;
transition: left .5s ease-in-out;
cursor: pointer;
float: left;
}
#menu-toggle + label .menu-icon,
#menu-toggle + label .arrow-icon {
display: inline-block;
overflow: hidden;
transition: width .5s ease-in-out;
}
#menu-toggle + label .menu-icon {
width: 3vmax;
}
#menu-toggle + label .arrow-icon {
width: 0;
}
#menu-toggle ~ ul {
margin: 0;
padding: 0;
list-style: none;
top: 5vmax;
left: -10vw;
width: 10vw;
text-align: left;
overflow: hidden;
}
#menu-toggle:checked ~ ul,
#menu-toggle:checked + label {
left: 0;
}
#menu-toggle:checked + label .menu-icon {
width: 0;
}
#menu-toggle:checked + label .arrow-icon {
width: 3vmax;
}
#menu-toggle:checked ~ main {
left: 10vw;
transform: rotateY(12deg);
}
#menu-toggle ~ ul > li > a {
display: block;
color: inherit;
text-decoration: none;
padding: 1vmin;
}
#menu-toggle ~ ul > li > a:hover {
background-color: saddlebrown;
}
@media (max-width: 768px) { /* CUSTOMIZE FOR SMALLER SCREENS HERE */
body {
font-size: 14px;
}
#menu-toggle + label {
font-size: 5vmax;
line-height: 5vmax;
}
#menu-toggle ~ ul {
font-size: 10px;
line-height: 20px;
left: -20vw;
width: 20vw;
}
#menu-toggle:checked ~ main {
left: 20vw;
transform: rotateY(22deg);
}
}
</style>
</head>
<body>
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle"><span class="menu-icon">☰</span><span class="arrow-icon">←</span></label>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<main>
<h1>Cool Landing Page with Menu</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus dolorem fugit ullam eum aspernatur harum. Quod repellendus cum neque, sapiente impedit quam dolorem sunt quibusdam odit corrupti magnam fugiat officiis.</p>
</main>
</body>
</html>
Coding Video
Comment
