CSS3中怎么实现立方体自转效果

首先，一个静态的立方体 

1. .face:nth-child() {    
   -webkit-transform: /*rotateY(deg)*/ translateZ(.em /* half the side length, em in this case */);    
   }    
   .face:nth-child() {    
   -webkit-transform: rotateY( deg) translateZ(.em);    
   }    
   .face:nth-child() {    
   -webkit-transform: rotateY(deg) translateZ(.em);    
   }    
   .face:nth-child() {    
   -webkit-transform: rotateY(deg) translateZ(.em);    
   }

让立方体转起来 

1. .cube--ani {    
   -webkit-animation: rot s linear infinite;    
   }    
   @-webkit-keyframes rot {    
   to { -webkit-transform: rotateY(-deg) rotateX(deg); }    
   }

上述内容就是CSS3中怎么实现立方体自转效果 ，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。