Css3 achieves cube rotation, and css3 achieves cube Rotation

Css3 achieves cube rotation, and css3 achieves cube Rotation

First, an HTML parent div contains four absolutely positioned Divs.

1. <Div class = 'iner iner -- realistic '>
2. <Div class = 'CUBE -- wan'>
3. <Div class = 'face'> 1 </div>
4. <Div class = 'face'> 2 </div>
5. <Div class = 'face'> 3 </div>
6. <Div class = 'face'> 4 </div>
7. </Div>
8. </Div>

First, a static cube

1. . Face: nth-child (1 ){
2. -Webkit-transform:/* rotateY (0deg) */translateZ (2.5em/* half the side length, 5em in this case */);
3. }
4. . Face: nth-child (2 ){
5. -Webkit-transform: rotateY (90deg) translateZ (2.5em );
6. }
7. . Face: nth-child (3 ){
8. -Webkit-transform: rotateY (180deg) translateZ (2.5em );
9. }
10. . Face: nth-child (4 ){
11. -Webkit-transform: rotateY (270deg) translateZ (2.5em );
12. }

Turn the cube

1. . Cube -- ani {
2. -Webkit-animation: rot 4S linear infinite;
3. }
4. @-Webkit-keyframes rot {
5. To {-webkit-transform: rotateY (-330deg) rotateX (370deg );}
6. }

An animation rot is defined here.

 

Rotate from the starting position to the Y axis-330deg X axis 370deg

And the loop is infinite, every 4 s

OK!