CSS AdvancedLesson #137

3D Cube

Here we demonstrate how to make another classic 3D object: A rotating cube.

CSS - A Rotating 3D Cube

Here we demonstrate how to make another classic 3D object: A rotating cube.

front back right left top bottom

The HTML Structure

Let's start with the basic HTML structure:

Example

Example Code

html

Try it Yourself

Live Output Preview:

The container element will house the 3D space. The cube element acts as the 3D object. Six separate face elements are used for the six faces of the cube (front, back, right, left, top, and bottom).

The CSS Styling

First, we define the 3D container box: Apply perspective, along with height, width and margin:

Example

Example Code

css

Try it Yourself

.container {
  width: 200px;
  height: 200px;

  margin: 100px auto;
  perspective: 600px;
}

Now the cube element can be transformed in its container's 3D space. We add width: 100%; and height: 100%;. The position: relative is used to position cube faces absolutely. The transform-style: preserve-3d is essential here. It forces child elements into 3D space. Without this, the faces flatten into a 2D sheet. We also add a CSS animation, to trigger continuous rotation of the cube:

Example

Example Code

css

Try it Yourself

.cube {
  width: 100%;
  height: 100%;
  position:
  relative;
  transform-style: preserve-3d;
  animation: spin 12s
  infinite linear;
}

Then, we add some base styling for all six cube faces. To position the faces in 3D space, we will need to reset their positions in 2D with position: absolute. We also add a translucent red background color to observe the depth:

Example

Example Code

css

Try it Yourself

.face {
  position: absolute;
  width: 200px;

  height: 200px;
  border: 2px solid white;
  line-height:
  200px;
  text-align: center;
  font-size: 24px;

  font-weight: bold;
  color: white;
  background: rgba(255, 0, 0,
  0.5);
}

Next, we need to position each face individually in 3D space. Assuming a 200px cube, each face translates exactly 100px from center:

Example

Example Code

css

Try it Yourself

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

At the end, we create the keyframe animation to rotate the cube:

Example

Example Code

css

Try it Yourself

@keyframes spin {
  from { transform: rotateX(0deg) rotateY(0deg); }

  to { transform: rotateX(360deg) rotateY(360deg); }
}

Full Example of Rotating 3D Cube

Here is the full example of the rotating 3D cube:

Example

Example Code

css

Try it Yourself

.container {
  width: 200px;
  height: 200px;

  margin: 100px auto;
  perspective: 600px;
}

.cube {
  width: 100%;

  height: 100%;
  position: relative;
  transform-style:
  preserve-3d;
  animation: spin 12s infinite linear;
}

.face {
  position: absolute;
  width: 200px;

  height: 200px;
  border: 2px solid white;
  line-height:
  200px;
  text-align: center;
  font-size: 24px;

  font-weight: bold;
  color: white;
  background: rgba(255, 0,
  0, 0.5);
}

.front { transform: rotateY( 0deg)
  translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px);
  }
.left { transform:
  rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY( 90deg)
  translateZ(100px); }
.top { transform: rotateX( 90deg) translateZ(100px); }

  .bottom { transform: rotateX(-90deg) translateZ(100px); }

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