PROWARE technologies
PROWARE technologies

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