3D Glass Cube with Reflection
High-contrast 3D glass cube with reflective surfaces and shadow
Code
.cube-3d-container {
width: 300px;
height: 300px;
perspective: 1000px;
display: flex;
align-items: center;
justify-content: center;
}
.glass-cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: cube-spin 15s infinite linear;
}
.cube-face-3d {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}
.face-front-3d { transform: translateZ(100px); }
.face-back-3d { transform: rotateY(180deg) translateZ(100px); }
.face-right-3d { transform: rotateY(90deg) translateZ(100px); }
.face-left-3d { transform: rotateY(-90deg) translateZ(100px); }
.face-top-3d { transform: rotateX(90deg) translateZ(100px); }
.face-bottom-3d { transform: rotateX(-90deg) translateZ(100px); }
@keyframes cube-spin {
0% { transform: rotateX(0deg) rotateY(0deg); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="cube-3d-container"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="glass-cube"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="cube-face-3d face-front-3d"</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-3d face-back-3d"</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-3d face-right-3d"</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-3d face-left-3d"</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-3d face-top-3d"</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-3d face-bottom-3d"</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>>