This shows how to create a 3D cube. The six faces of the cube are placed within a container element (with the ID "cube" in this example.) The perspective of the cube is passed to the 6 faces using the transform-style: preserve-3d style. Each face is placed in position by rotating and translating it along one of 6 directions.

Click the [Front] through [Top] buttons to animate the process by which faces are added to the cube. Once all six faces are assembled, you can rotate the entire cube using the rotation sliders. Since each face exists in the same 3D space, they will rotate along with the cube. The HTML and CSS code for assembling the cube and running the rotation is shown below. Note that this example uses square faces that are 300 pixels wide and high and translated 150 pixels along the x, y, and z axes. For larger or smaller cubes, you can rescale these dimensions.