CSS3 3D transform create cube

First, create an html Structure
[Html]
<Section class = "container">
<Div id = "cube">
<Figure class = "front"> 1 </figure>
<Figure class = "back"> 2 </figure>
<Figure class = "right"> 3 </figure>
<Figure class = "left"> 4 </figure>
<Figure class = "top"> 5 </figure>
<Figure class = "bottom"> 6 </figure>
</Div>
</Section>

Then define css. The key is perspective and style.
[Html]
. Container {
Width: 200px;
Height: 200px;
Position: relative;
<Span style = "color: # ff0000;"> perspective: 1000px; </span>
}
 
# Cube {
Width: 100%;
Height: 100%;
Position: absolute;
<Span style = "color: # ff0000;"> transform-style: preserve-3d; </span>
}
 
# Cube figure {
Width: 196px;
Height: 196px;
Display: block;
Position: absolute;
Border: 2px solid black;
}

Define the six sides of the cube. An element has the front and back sides. Here, the div center is used to rotate an angle first. For example, back is used to rotate 180 degrees first, in this case, the div's Z axis is directed to the page (the default is from the page to the outside), and then 100px to the page
[Html] www.2cto.com
# Cube. front {transform: rotateY (0deg) translateZ (100px );}
# Cube. back {transform: rotateX (180deg) translateZ (100px );}
# Cube. right {transform: rotateY (90deg) translateZ (100px );}
# Cube. left {transform: rotateY (-90deg) translateZ (100px );}
# Cube. top {transform: rotateX (90deg) translateZ (100px );}
# Cube. bottom {transform: rotateX (-90deg) translateZ (100px );}

After the cube is created, you can start to define the transform for the cube.
[Html]
# Cube. show-front {transform: translateZ (-100px) rotateY (0deg );}
# Cube. show-back {transform: translateZ (-100px) rotateX (-180deg );}
# Cube. show-right {transform: translateZ (-100px) rotateY (-90deg );}
# Cube. show-left {transform: translateZ (-100px) rotateY (90deg );}
# Cube. show-top {transform: translateZ (-100px) rotateX (-90deg );}
# Cube. show-bottom {transform: translateZ (-100px) rotateX (90deg );}

Finally, add transition.
[Html]
# Cube {transition: transform 1 s ;}

Key points:
The element in the cube is a whole, and all transforms are affected.
Generally, the elements in the cube are first transform to the corresponding position, and then transform the cube.
The transform sequence is very important.
Transform always compares with the original state, not with the current State. If transition is not used, there will be no animation, directly changing from one State to another
Transition is responsible for the process from the current state to the next state. If you want to control this process, use the animation in CSS3.

Author: baoeni