Rotating Cube
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #282c34;
}
.cube {
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
animation: rotate 5s infinite linear;
}
.cube div {
position: absolute;
width: 100px;
height: 100px;
border: 2px solid #fff;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.front { transform: rotateY( 0deg) translateZ(50px); }
.back { transform: rotateY(180deg) translateZ(50px); }
.right { transform: rotateY( 90deg) translateZ(50px); }
.left { transform: rotateY(-90deg) translateZ(50px); }
.top { transform: rotateX( 90deg) translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }
@keyframes rotate {
0% { transform: rotateX(0deg) rotateY(0deg); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}