先是HTML 一個父div包含四個絕對定位的div

CSS Code復制內容到剪貼板

<div class=’container container–realistic’>    
<div class=’cube cube–ani’>    
<div class=’face’>1</div>    
<div class=’face’>2</div>    
<div class=’face’>3</div>    
<div class=’face’>4</div>    
</div>    
</div>   

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

CSS Code復制內容到剪貼板

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

讓立方體轉起來

CSS Code復制內容到剪貼板

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

這里定義了一個動畫 rot
從起始位置轉動到 Y軸-330deg X軸370deg
并且循環(huán)無限次，每次4s
基于CSS3實現(xiàn)立方體自轉效果 的全部內容就給大家介紹完了，希望對大家有所幫助！