css3实现立方体，并且自转效果

CSS3实现立方体，并且自转效果先是HTML 一个父div包含四个绝对定位的div

<divclass='containercontainer--realistic'><divclass='cubecube--ani'><divclass='face'>1</div><divclass='face'>2</div><divclass='face'>3</div><divclass='face'>4</div></div></div>首先，一个静态的立方体

.face:nth-child(1){-webkit-transform:/*rotateY(0deg)*/translateZ(2.5em/*halfthesidelength,5eminthiscase*/);}.face:nth-child(2){-webkit-transform:rotateY(90deg)translateZ(2.5em);}.face:nth-child(3){-webkit-transform:rotateY(180deg)translateZ(2.5em);}.face:nth-child(4){-webkit-transform:rotateY(270deg)translateZ(2.5em);}让立方体转起来

.cube--ani{-webkit-animation:rot4slinearinfinite;}@-webkit-keyframesrot{to{-webkit-transform:rotateY(-330deg)rotateX(370deg);}}这里定义了一个动画 rot

从起始位置转动到 Y轴-330deg X轴370deg

并且循环无限次，每次4s

OK！