CSS Only Rotating Cube Menu
How do I make an css only rotating cube menu?
What is a css only rotating cube menu? How do you make a css only rotating cube menu? This script and codes were developed by David Dietle on 24 September 2022, Saturday.
CSS Only Rotating Cube Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Only Rotating Cube Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="cubes"> <div class="wrap"> <div class="cube"> <div class="front"></div> <div class="back"> <h1> <a href="#">Click Me</a> </h1> </div> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> </div> </div> <div class="wrap"> <div class="cube"> <div class="front"></div> <div class="back"> <h1> <a href="#">Click Me</a> </h1> </div> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> </div> </div> <div class="wrap"> <div class="cube"> <div class="front"></div> <div class="back"> <h1> <a href="#">Click Me</a> </h1> </div> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> </div> </div>
</div>
</body>
</html>
CSS Only Rotating Cube Menu - Script Codes CSS Codes
body { padding: 0px; margin: 0px; background-color: azure; text-align: center; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; overflow: hidden; font-family:'Arial Rounded MT';
}
#cubes { transform-style: preserve-3d; background-color: transparent; width: 350px; height: 350px; position: relative; margin: 40px auto; perspective-origin: 50% 100px; perspective: 1000px;
}
.wrap { width: 300px; height: 100px; background-color: transparent; position: relative; transform-style: preserve-3d; display: inline-block; top: 0px; left: 0px; transform: rotateX(-20deg) rotateY(-25deg) translateZ(0px);
}
.cube { width: 300px; height: 100px; display: block; transform-style: preserve-3d; perspective-origin: top 100px; background-color: transparent; position: absolute; margin: 0px; transition: all 1s linear;
}
.cube div { height: 100px; box-sizing: border-box; position: absolute; display: block; opacity: .5;
}
.back { transform: translateZ(-50px) rotateY(180deg); width: 300px; padding:20PX;
}
.right { width: 100px; transform: rotateY(-270deg) translateX(50px) translateZ(200px); transform-origin: top right;
}
.left { width: 100px; transform: rotateY(270deg) translateX(-50px); transform-origin: center left;
}
.top { transform: rotateX(-90deg) translateY(-50px); transform-origin: top center; width: 300px;
}
.bottom { transform: rotateX(90deg) translateY(50px); transform-origin: bottom center; width: 300px;
}
.front { transform: translateZ(50px); width: 300px;
}
.wrap:first-child .cube div { background-color: deepskyblue; box-shadow: inset 0 0 20px blue; border: solid 1px blue;
}
.wrap:nth-child(2) .cube div { background-color: greenyellow; box-shadow: inset 0 0 20px green; border: solid 1px green;
}
.wrap:last-child .cube div { background-color: palevioletred; box-shadow: inset 0 0 20px red; border: solid 1px red;
}
.back a { transform: rotateZ(180deg); display:inline-block; position:relative; margin:0px auto; color:black; visibility:hidden; text-decoration:none;
}
.back:hover a { visibility:visible;
}
.back a:hover { text-shadow: 5px 5px 5px slategrey;
}
.cube:hover { transform: rotateX(180deg);
}
Developer | David Dietle |
Username | ddietle |
Uploaded | September 24, 2022 |
Rating | 4 |
Size | 2,119 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Pure CSS Spinning Cogs | 1,825 Kb |
CSS Flickering Image | 13,709 Kb |
Radmonized Skyscraper With Animation | 3,121 Kb |
Image as Text | 88,679 Kb |
Glowing Acid Bloop | 2,904 Kb |
Lights | 2,655 Kb |
Random City | 8,204 Kb |
3D Grid | 3,137 Kb |
Old Tymey Book | 7,018 Kb |
Fireflies In The Night Sky | 3,327 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
To Do List with Delete | Mattlbrody | 2,068 Kb |
Plotting Points with D3.js | Laurakelly | 31,996 Kb |
Simple Buttons | Haydenmills | 1,750 Kb |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
PNotify Demo | Adittmar | 1,731 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
Drag and Drop Quiz | Cgspicer | 3,837 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
Masonry | Uriuriuriu | 5,005 Kb |
Video mute | Leon9208 | 2,131 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!