CSS3 Rotating Cube

Note: This is a restored article from the original A thousand nodes blog (circa 2012).

I set off on a quest to make a box out of CSS alone and make it rotate. Here's how to create a 3D rotating cube using only CSS3 transformations.

The HTML Structure

First, we'll need to set up our HTML structure:

<div class="cube-container">
  <div class="cube">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
    <div class="face right">Right</div>
    <div class="face left">Left</div>
    <div class="face top">Top</div>
    <div class="face bottom">Bottom</div>
  </div>
</div>

The CSS Magic

Now let's add the CSS to make this work:

.cube-container {
  width: 200px;
  height: 200px;
  perspective: 1000px;
  margin: 100px auto;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  animation: rotate 10s infinite linear;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}

/* Position the faces */
.front  { transform: rotateY(0deg) translateZ(100px); background: rgba(255, 0, 0, 0.7); }
.right  { transform: rotateY(90deg) translateZ(100px); background: rgba(0, 255, 0, 0.7); }
.back   { transform: rotateY(180deg) translateZ(100px); background: rgba(0, 0, 255, 0.7); }
.left   { transform: rotateY(-90deg) translateZ(100px); background: rgba(255, 255, 0, 0.7); }
.top    { transform: rotateX(90deg) translateZ(100px); background: rgba(255, 0, 255, 0.7); }
.bottom { transform: rotateX(-90deg) translateZ(100px); background: rgba(0, 255, 255, 0.7); }

@keyframes rotate {
  0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg); }
  100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg); }
}

How It Works

The magic happens through these CSS3 techniques:

1. Perspective: Gives the 3D space a sense of depth
2. Transform-style: preserve-3d: Ensures child elements maintain their 3D position
3. Transform: translateZ, rotateX, rotateY: Positions each face in 3D space
4. Animation with @keyframes: Creates the continuous rotation effect

Browser Compatibility

This works in modern browsers that support CSS3 3D transforms:

• Chrome 12+
• Firefox 10+
• Safari 4+
• Opera 15+
• IE 10+

For older browsers, you might want to add vendor prefixes or use a fallback:

.cube {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /* other properties */
}

Live Example

To see this in action, check out this CodePen example (note: you'll need to recreate this CodePen since the original might not be available).

The CSS3 cube is a great demonstration of modern CSS capabilities, showing how we can create complex 3D objects without relying on JavaScript or external libraries.