好吧，这里直接编辑源码并不允许设置css和js……毕竟会有危险……那直接放代码吧

      
          
              
      
          
                  
      
        
       
            
        
                
         
                    
          
           1
          
                    
          
           2
          
                    
          
           3
          
                    
          
           4
          
                    
          
           5
          
                    
          
           6
          
                          
         
                
        
            
        
                
         
                
         
            
        
        
       
        
       
            
        0            
        1            
        2            
        3            
        4            
        5            
        6                
       
    
      
          

.cube-container{
            perspective:1000px;        -webkit-perspective:1000px;        transform:scale(0.8);    }    .cube{
            height: 200px;        width: 200px;        position: relative;        margin:auto;        transform-style:preserve-3d;/*定义3d转换*/        transition: all 1s;                    }    .cube.show1{
            transform:rotateX(0deg) rotateY(0deg);    }    .cube.show2{
            transform:rotateX(0deg) rotateY(180deg);    }    .cube.show3{
            transform:rotateX(0deg) rotateY(90deg);    }    .cube.show4{
            transform:rotateX(0deg) rotateY(-90deg);    }    .cube.show5{
            transform:rotateX(-90deg) rotateY(0deg);    }    .cube.show6{
            transform:rotateX(90deg) rotateY(0deg);    }    .animation-rotating{
            animation:rotating 8s infinite;/*animation：动画名字 时长 无限循环 线性速度（匀速）*/        }    /*动画效果，也可以以百分百的方式。默认逆时针的方向旋转。*/    @keyframes rotating{
            from{transfrom:rotate3d(0.5,-0.5,0,0deg)}        to{
    transform:rotate3d(0.5,-0.5,0,-360deg)}            }    .cube .surface{
            height: 100%;        width: 100%;        opacity: 0.6;        position: absolute;        text-align: center;        background: black;        color:#fff;        line-height: 200px;        font-size: 30px;        border:1px solid #fff;            transition: all 1s;            }    .cube .surface1{
            transform:translateZ(100px);    }    .cube .surface2{
                transform:rotateY(180deg) translateZ(100px);    }    .cube .surface3{
            transform:rotateY(-90deg) translateZ(100px);    }    .cube .surface4{
            transform:rotateY(90deg) translateZ(100px);    }    .cube .surface5{
            transform:rotateX(90deg) translateZ(100px);    }    .cube .surface6{
            transform:rotateX(-90deg) translateZ(100px);    }        .cube .surface1:hover, .cube .surface1.hover{
            transform:translateZ(200px);        background:white;        color:black;    }    .cube .surface2:hover, .cube .surface2.hover{
            transform:rotateY(180deg) translateZ(200px);        background:white;        color:black;    }    .cube .surface3:hover, .cube .surface3.hover{
            transform:rotateY(-90deg) translateZ(200px);        background:white;        color:black;    }    .cube .surface4:hover, .cube .surface4.hover{
            transform:rotateY(90deg) translateZ(200px);        background:white;        color:black;    }    .cube .surface5:hover, .cube .surface5.hover{
            transform:rotateX(90deg) translateZ(200px);        background:white;        color:black;    }    .cube .surface6:hover, .cube .surface6.hover{
            transform:rotateX(-90deg) translateZ(200px);        background:white;        color:black;    }