js实现可旋转的立方体模型

这是一个简单的立方体应用，他是很多立方旋转变换的基础，例如实现3D轮播图的实现等。

  
  
  
    *{padding: 0; margin: 0}
    img{border: 0}
    ul li{list-style: none}
    ul{width: 200px; height: 200px; margin: 100px auto;
    position: relative; -webkit-transform-style: preserve-3d ;
      
    }
    
    li{width:200px;height:200px;position:absolute;text-align:center;line-height:200px;font-size:80px;font-weight:bold;color:#fff;}
    
    li:nth-child(1){background:rgba(255,0,0,1);-webkit-transform:rotateX(90deg)  translateZ(100px);}
    li:nth-child(2){background:rgba(0,255,255,1);-webkit-transform:rotateX(270deg) translateZ(100px);}
    li:nth-child(3){background:rgba(255,0,255,1);-webkit-transform:rotateY(90deg) translateZ(100px);}
    li:nth-child(4){background:rgba(0,255,0,1);-webkit-transform:rotateY(270deg) translateZ(100px);}
    li:nth-child(5){background:rgba(200,200,0,1);-webkit-transform:translateZ(-100px);}
    li:nth-child(6){background:rgba(0,0,255,1);-webkit-transform: translateZ(100px) ;}
    .button{
      width: 200px; margin: 20px auto;
      position: relative;
      cursor: pointer;
    }
    input{
      width: 50px; height: 30px;
      position: absolute;
      cursor: pointer;
    }
    
    input:nth-child(1){left: 100px; top: 0}
    input:nth-child(2){left:200px;top:50px;}
    input:nth-child(3){left:0px;top:50px;}
    input:nth-child(4){left:100px;top:100px;}
    input:nth-child(5){left:100px;top:50px;}
  
  



  
1
  
2
  
3
  
4
  
5
  
6