CSS3 realizes the cube, and the rotation effect

First HTML a parent div contains four absolutely positioned DIV

2. <div class=' container container--realistic '>
4. <div class=' cube cube--ani '>
6. <div class=' face '>1</div>
8. <div class=' face '>2</div>
10. <div class=' face '>3</div>
12. <div class=' face '>4</div>
14. </div>
16. </div>

First, a static cube

2. . Face:nth-child (1) {
4. -webkit-transform: /*rotatey (0deg) */Translatez (2.5em/ * Half the side length, 5em in this case */);
6. }
8. . Face:nth-child (2) {
10. -webkit-transform:rotatey ( 90deg) Translatez (2.5em);
12. }
14. . Face:nth-child (3) {
16. -webkit-transform:rotatey (180deg) Translatez (2.5em);
18. }
20. . Face:nth-child (4) {
22. -webkit-transform:rotatey (270deg) Translatez (2.5em);
24. }

Let the cube spin.

1. . Cube--ani {
2. -webkit-animation:rot 4s linear infinite;
3. }
4. @-webkit-keyframes Rot {
5. to {-webkit-transform:rotatey (-330deg) Rotatex (370deg);}
6. }

This defines an animated rot.

From the starting position to the y-axis -330deg x-axis 370deg

and Loop unlimited times, 4s each time

Ok!

CSS3 realizes the cube, and the rotation effect