主要用到动画css3  animation,特别注意当完成正方体的过程中，每个面旋转时这个面的坐标系是跟着变换的，只是他们的相对位置不变，默认的变换基点是（50% 50% 0），我们可以使用transform-origin改变默认基点，也可以按默认的基点来变换，关于rotateX或者rotateY旋转角度的正负区分，是视线在x轴或者Y轴的+方向向负方向看，如果是顺时针则角度为正值，逆时针为负值，下面是按默认基点实现立方体的。

    
 	
     
 		
      
       1
      
 		
      
       2
      
 		
      
       3
      
 		
      
       4
      
 		
      
       5
      
 		
      
       6
      
 	
     
 
    

.my3dspace{margin-top:100px;-webkit-perspective:800;}#cubepages{width:200px;height:200px;margin:0 auto;-webkit-transform-style:preserve-3d;position:relative;-webkit-animation:rotate 20s infinite;}.page{position:absolute;width:160px;height:160px;padding:20px;box-sizing:content-box;font-size:100px;text-align:center;line-height:170px;background:#333;color:#fff;-webkit-transition: -webkit-transform 1s linear;}#font {    transform: rotateY(0) translateZ(100px);background:#09c45d;}#back {    transform: translateZ(-100px) rotateY(180deg) ;background:#01bb43;}#left {    transform: rotateY(-90deg) translateZ(100px);background:#dd74f7;}#right {    transform: rotateY(90deg) translateZ(100px);background:#eb12c0;}#upper {    transform: rotateX(90deg) translateZ(100px);background:#03cae2;}#bottom {    transform: rotateX(-90deg) translateZ(100px);background:#11aafa;}@-webkit-keyframes rotate {  from {    transfrom:rotateX(0deg) rotateY(0deg) rotateZ(0deg);  }  to{    transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);  }}

另一个可以拖动的例子

    
                    
    
        
     
            
      
       front
      
            
      
       back
      
            
      
       up
      
            
      
       down
      
            
      
       left
      
            
      
       right
      
        
     
    
    

里面用到的

background-sizecover保持图像的纵横比并将图像拉长或缩放成将完全覆盖背景定位区域的最小大小。

background-size：contain 意思会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

相同点：图片都是等比例缩放

不同点：cover是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示

contain：正好相反，他是按照某一边来覆盖显示区域的，会有白边