articles » current » css » y-axis-rotating-page-reveals-menu

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">&#9776;</span><span class="arrow-icon">&larr;</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

https://youtu.be/Yol7-eIqLpU


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE