Back to Components

Rotating Cube

A fully 3D cube that continuously rotates in space, showing all six faces. Great for product showcases, dice animations, or creative loading indicators.

3D Effects Animation

Live Preview

1
2
3
4
5
6

HTML

<div class="cube">
    <div class="cube-face front">1</div>
    <div class="cube-face back">2</div>
    <div class="cube-face right">3</div>
    <div class="cube-face left">4</div>
    <div class="cube-face top">5</div>
    <div class="cube-face bottom">6</div>
</div>

CSS

.cube {
    width: 100px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 10s linear infinite;
}

@keyframes rotateCube {
    from { transform: rotateX(0deg) rotateY(0deg); }
    to { transform: rotateX(360deg) rotateY(360deg); }
}

.cube-face {
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgba(255, 107, 107, 0.9);
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    color: white;
}

.cube-face.front { transform: translateZ(50px); }
.cube-face.back { transform: rotateY(180deg) translateZ(50px); }
.cube-face.right { transform: rotateY(90deg) translateZ(50px); }
.cube-face.left { transform: rotateY(-90deg) translateZ(50px); }
.cube-face.top { transform: rotateX(90deg) translateZ(50px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(50px); }