CSS3中怎么實(shí)現(xiàn)立方體自轉(zhuǎn)效果

首先，一個(gè)靜態(tài)的立方體 

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);    
   }

讓立方體轉(zhuǎn)起來(lái) 

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

上述內(nèi)容就是CSS3中怎么實(shí)現(xiàn)立方體自轉(zhuǎn)效果 ，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

<fieldset id="yacmw"></fieldset>