CSS3旋转3D立方体-︶ㄣ古剑丶魂

  1     meta   charset  ="utf-8"  > 
  2     style  > 
  3     *  { 
  4       margin  :  0px  ; 
  5       padding  :  0px  ; 
  6     } 
  7    
  8     @-webkit-keyframes anima  { 
  9       0%{
  10         -webkit-transform  :  rotateX(0deg) rotateY(0deg) rotateZ(0deg)  ; 
 11         -webkit-transform-origin  :  center center  ; 
 12       } 
 13       100%  { 
 14         -webkit-transform  :  rotateX(180deg) rotateY(180deg) rotateZ(180deg)  ; 
 15         -webkit-transform-origin  :  center center  ; 
 16       } 
 17     }
  18    
 19     #box  { 
 20       width  :  100px  ; 
 21       height  :  100px  ; 
 22       position  :  relative  ; 
 23       margin  :  0px auto  ; 
 24       top  :  50%  ; 
 25       -webkit-transform-style  :  preserve-3d  ; 
 26       -webkit-perspective  :  0px  ; 
 27       -moz-transform-style  :  preserve-3d  ; 
 28       -moz-perspective  :  0px  ; 
 29       -webkit-animation  :  anima 5s ease infinite  ; 
 30       -moz-animation  :  anima 5s ease infinite  ; 
 31     } 
 32    
 33     .box  { 
 34       width  :  100px  ; 
 35       height  :  100px  ; 
 36       line-height  :  100px  ; 
 37       text-align  :  center  ; 
 38       position  :  absolute  ; 
 39     } 
 40    
 41     .box1  { 
 42       -webkit-transform  :  rotateY(90deg) translateZ(-50px)  ; 
 43       -moz-transform  :  rotateY(90deg) translateZ(-50px)  ; 
 44       background-color  :  rgba(255,0,0,0.8)  ; 
 45     } 
 46    
 47     .box2  { 
 48       -webkit-transform  :  rotateY(90deg) translateZ(50px)  ; 
 49       -moz-transform  :  rotateY(90deg) translateZ(50px)  ; 
 50       background-color  :  rgba(0,255,0,0.8)  ; 
 51     } 
 52    
 53     .box3  { 
 54       -webkit-transform  :  rotateX(90deg) translateZ(50px)  ; 
 55       -moz-transform  :  rotateX(90deg) translateZ(50px)  ; 
 56       background-color  :  rgba(0,0,255,0.8)  ; 
 57     } 
 58    
 59     .box4  { 
 60       -webkit-transform  :  rotateX(90deg) translateZ(-50px)  ; 
 61       -moz-transform  :  rotateX(90deg) translateZ(-50px)  ; 
 62       background-color  :  rgba(255,255,0,0.8)  ; 
 63     } 
 64    
 65     .box5  { 
 66       -webkit-transform  :  translateZ(-50px)  ; 
 67       -moz-transform  :  translateZ(-50px)  ; 
 68       background-color  :  rgba(255,0,255,0.8)  ; 
 69     } 
 70    
 71     .box6  { 
 72       -webkit-transform  :  translateZ(50px)  ; 
 73       -moz-transform  :  translateZ(50px)  ; 
 74       background-color  :  rgba(0,255,255,0.8)  ; 
 75     } 
 76     style  > 
 77  
 78     div   id  ="box"  > 
 79       ul   class  ="box box1"  > 左面   ul  > 
 80       ul   class  ="box box2"  > 右面   ul  > 
 81       ul   class  ="box box3"  > 顶面   ul  > 
 82       ul   class  ="box box4"  > 底面   ul  > 
 83       ul   class  ="box box5"  > 背面   ul  > 
 84       ul   class  ="box box6"  > 正面   ul  > 
 85     div  >  

查看更多关于CSS3旋转3D立方体-︶ㄣ古剑丶魂的详细内容...