一款利用html5和css3实现的3D滚动特效的教程

            </div>  
            <div class="side side5">  
            </div>  
            <div class="side side6">  
            </div>  
        </div>  
    </div>  

　　css3代码：

CSS Code复制内容到剪贴板

body{   
  height:100vh;   
}   
.container{   
  position:absolute;   
  height:100px;   
  width:100px;   
  left:33%;   
  top:50%;   
  -webkit-transform: translateX(-50%) translateY(-50%);   
          transform: translateX(-50%) translateY(-50%);   
  -webkit-perspective:400px;   
          perspective:400px;   
}   
.cube{   
  height:100px;   
  widht:100px;   
  -webkit-transform-origin:50% 50%;   
          transform-origin:50% 50%;   
  -webkit-transform-style:preserve-3d;   
          transform-style:preserve-3d;   
  -webkit-animation:rotate 4s infinite ease-in-out;   
          animation:rotate 4s infinite ease-in-out;   
  
}   
.side{   
  position:absolute;   
  display:block;   
  height:100px;   
  width:100px;   
}   
.side1{   
  background:#41C3AC;   
  -webkit-transform:translateZ(100px);   
          transform:translateZ(100px);   
}   
.side2{   
  background:#FF884D;   
  -webkit-transform:rotateY(90deg) translateZ(100px);   
          transform:rotateY(90deg) translateZ(100px);   
}