Create 3D Rotating Cube Animation using HTML & CSS

Want to create a stunning 3D rotating cube animation using just HTML and CSS? You’re in the right place! This tutorial will guide you through building a fully animated 3D cube using pure CSS—no JavaScript, no external libraries.

This kind of animation is perfect for:

• Interactive user interfaces
• Website loaders or splash screens
• Creative UI/UX showcases
• CSS animation practice projects

By using transform-style: preserve-3d, 3D transforms, and keyframe animation, we’ll bring this cube to life with a smooth, infinite rotation around all three axes (X, Y, and Z).

Let’s break it down step-by-step and learn how each side of the cube works, followed by the spinning magic.

HTML Structure

To start off, we’ll set up the HTML structure for our 3D cube. The cube itself will be made up of six divs, each representing a face (front, back, left, right, top, bottom). All of them are wrapped inside a parent container called .cube, and everything sits in the center using .main-container.

<div class="main-container">
    <div class="cube">
        <div class="left"></div>
        <div class="right"></div>
        <div class="front"></div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</div>

With this simple structure, each side of the cube is clearly separated and can be transformed individually in 3D space. The magic will now come from CSS where we animate and rotate the cube in 360 degrees on the X, Y, and Z axes.

CSS for 3D Rotating Cube Animation

Now let’s bring the cube to life. We’ll use CSS variables for easy control over cube size, then apply transform-style: preserve-3d and @keyframes animation to continuously rotate the cube in three dimensions. Each face is colored differently for visual clarity.

:root{
    --width:200px;
    --height:200px;
}

.main-container {
    display: flex;
    min-height: 100vh;
    min-width: 300px;
    align-items: center;
    justify-content: center;
}

body {
    background: black;
}

.cube {
    width: var(--width);
    height: var(--height);
    position: relative;
    transform-origin: center;
    transform-style: preserve-3d;
    animation: rotate 6s linear infinite;
}

.cube div {
    width: 100%;
    height: 100%;
    position: absolute;
    border: 1px solid rgba(220, 220, 220, 0.388);
}

.left {
    transform: rotateY(90deg);
    background: #ff00008a;
    transform-origin: left;
}

.right {
    transform-origin: right;
    transform: rotateY(270deg);
    background: #0080006e;
}

.front {
    background: #80008073;
}

.back {
    transform: translateZ(-200px) rotateX(0deg);
    background: #6aff006a;
}

.top {
    transform-origin: top;
    background: #d000ffbd;
    transform: rotateX(270deg);
}

.bottom {
    transform-origin: bottom;
    background: #ffa500a1;
    transform: rotateX(90deg);
}

@keyframes rotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

• transform-style: preserve-3d ensures that children of .cube are rendered in 3D space.
• Each face is rotated or translated to form a cube using:
  • rotateX for top/bottom,
  • rotateY for left/right,
  • translateZ for back,
• @keyframes rotate creates the smooth, infinite 3D spinning effect on all three axes.

With the CSS animation rotating in three axes simultaneously, the cube appears to float and spin effortlessly. Using only a few lines of CSS, you’ve created a professional, interactive 3D element without any JavaScript or external libraries.

Final Thoughts

This Pure CSS 3D Rotating Cube Animation is lightweight, flexible, and visually impactful. It can be repurposed in loaders, hero sections, or even interactive visualizations. Try changing the colors, sizes, or axis rotations to create custom versions for your next UI project.

Live Preview