PROWAREtech
CSS: Unique Cube Menu
A rotating cube menu using only HTML and CSS.
Create a rotating cube with a link on each side that the user can click.
This is an example of using the :target pseudo class selector to create a single page website such as that which one would need for a React site.
This is a whole website contained in one single page. This means that all the text and images are downloaded at the same time. Be aware of this.
The links can also link to real separate pages, not having to link to pseudo class selector.
The cube code is NOT compatible with Internet Explorer — no cube displays.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cube Menu</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: black;
background-image: url(https://picsum.photos/id/1044/1920/1080);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.home {
position: absolute;
bottom: 15px;
left: 25px;
}
.home a {
color: rgba(255,255,255,0.5);
text-decoration: none;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
}
main {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.cube-container {
perspective: 10000px;
}
.cube {
transform-style: preserve-3d;
width: 28vmax;
height: 28vmax;
position: relative;
margin: auto;
animation: rotate 10s linear infinite;
transform-origin: 50% 50%;
}
@keyframes rotate {
from {
transform: rotateX(40deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(40deg) rotateY(360deg) rotateZ(360deg);
}
}
.cube a {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-decoration: none;
text-transform: uppercase;
font-size: 3vmax;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: white;
background-color: black;
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}
.cube a:nth-child(1) {
transform: rotateY(0deg) rotateZ(0deg) translateZ(14vmax);
background-image: url(https://picsum.photos/id/1018/500/500);
}
.cube a:nth-child(2) {
transform: rotateY(90deg) rotateZ(180deg) translateZ(14vmax);
background-image: url(https://picsum.photos/id/1019/500/500);
}
.cube a:nth-child(3) {
transform: rotateY(180deg) rotateZ(180deg) translateZ(14vmax);
background-image: url(https://picsum.photos/id/1022/500/500);
}
.cube a:nth-child(4) {
transform: rotateY(-90deg) rotateZ(180deg) translateZ(14vmax);
background-image: url(https://picsum.photos/id/1023/500/500);
}
.cube a:nth-child(5) {
transform: rotateX(90deg) rotateZ(0deg) translateZ(14vmax);
background-image: url(https://picsum.photos/id/1043/500/500);
}
.cube a:nth-child(6) {
transform: rotateX(-90deg) rotateZ(0deg) translateZ(14vmax);
background-image: url(https://picsum.photos/id/1050/500/500);
}
.cube a:hover {
background-image: none;
}
.page {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: red;
color: red;
visibility: hidden;
opacity: 0;
transform-origin: center;
transform: scale(1,.005);
transition: 1s;
}
.page h1 {
text-transform: uppercase;
letter-spacing: 1vmin;
font-size: 10vmin;
}
.page:target {
transition: opacity 1s 0s, transform .5s 1s, background-color 1s 1.5s, color 1s 1.5s;
background-color: black;
color: white;
transform: none;
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<main>
<div class="cube-container">
<div class="cube">
<a href="#about"><span>About</span></a>
<a href="#products"><span>Products</span></a>
<a href="#services"><span>Services</span></a>
<a href="#forums"><span>Forums</span></a>
<a href="#support"><span>Support</span></a>
<a href="#contact"><span>Contact</span></a>
</div>
</div>
</main>
<div class="page" id="about"><h1>About</h1></div>
<div class="page" id="products"><h1>Products</h1></div>
<div class="page" id="services"><h1>Services</h1></div>
<div class="page" id="forums"><h1>Forums</h1></div>
<div class="page" id="support"><h1>Support</h1></div>
<div class="page" id="contact"><h1>Contact</h1></div>
<div class="home"><a href="#!">home</a></div>
</body>
</html>
Coding Video
Comment
