3D Rotating Cube
Animated 3D cube with perspective and transform effects
Code
.cube-container {
width: 200px;
height: 200px;
perspective: 1000px;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotateCube 10s infinite linear;
}
.cube-face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid #333;
opacity: 0.8;
}
.face-front { background: #ff6b6b; transform: translateZ(100px); }
.face-back { background: #4ecdc4; transform: rotateY(180deg) translateZ(100px); }
.face-right { background: #ffe66d; transform: rotateY(90deg) translateZ(100px); }
.face-left { background: #1a535c; transform: rotateY(-90deg) translateZ(100px); }
.face-top { background: #7209b7; transform: rotateX(90deg) translateZ(100px); }
.face-bottom { background: #f72585; transform: rotateX(-90deg) translateZ(100px); }
@keyframes rotateCube {
0% { transform: rotateX(0) rotateY(0); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="cube-container"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="cube"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="cube-face face-front"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="cube-face face-back"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="cube-face face-right"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="cube-face face-left"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="cube-face face-top"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="cube-face face-bottom"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>