Css3-3d effect Cube

1. The top and bottom of the cube:

        . cubebottom{            Transform:rotatex (90deg);            Transform-origin:center bottom  ;/*: Rotates around X, mainly determines the height of Y: Right bottom, 1px  300px, 2px  300px,.. 100px 300px. */< c6/>}

2. Around the cube:

        . cubeleft{            Transform:rotatey (90deg);            Transform-origin:left center  ;/*: Rotate around y, main OK x  : Left bottom, left  300px, 0  300px,.. 0 500px.. */        }

3. Before and after the cube:

　　

     . cubefront{            Transform:translatez (0px);        }        . cubeback{            Transform:translatez ( -300px);        }

　　

4 Cube implementations: note

  /* Pivot Center and perspective distance */
Perspective-origin:  0 1000px;
perspective:2000px;

  /* Effect: Flat or 3d stereo */
transform-style:preserve-3d;

Source:

<! DOCTYPE html>
　
5 Cube Implementation-Animation implementation cube
<! DOCTYPE html>
　　
Css3-3d effect Cube