Motion and color - HTML5 and CSS3 - page 329

Next, because you want all six sides of the cube to be transformed
within the same 3D space, you set a transform-style value of preserve-3d
on the parent element:
div.cube {
transform-style: preserve-3d;
position: relative;
}
To start with, all six sides will be stacked on top of each other with
absolute positioning:
div.cube > div
{ position: absolute; color: #fff;
width: 200px; height: 200px; }
Now the individual sides are transformed in 3D . Each side is rotated so
it faces the correct way and then translated along the z-axis by 100 pix-
els (because the sides of the cube are 200 pixels deep). The z-axis is the
third dimension available in the 3D space. Because the rotation occurs
before the translation, each side is pushed away from the center of the
cube in a different direction:
.one {
transform: translateZ(100px);
background: rgba(136,136,136,0.5);
}
.two {
transform: rotateY(90deg) translateZ(100px);
background: rgba(102,102,102,0.5);
}
.three {
transform: rotateX(-180deg) translateZ(100px);
background: rgba(68,68,68,0.5);
}
.four {
transform: rotateY(-90deg) translateZ(100px);
background: rgba(34,34,34,0.5);
}
.five {
transform: rotateX(90deg) translateZ(100px);
background: rgba(153,153,153,0.5);
}