html-3D动画

3D效果的小魔方

今天利用html知识，写一个具有3D效果的魔方

思路就是首先对界面开“井深”

perspective: 1000px; 

然后写六个相同的容器（块）<div>，再对这六个块设置浮动布局，使六个块重叠

float: left;

然后通过旋转和平移使六个面组成一个正方体

transform: rotateX(90deg) translateZ(150px);

废话不多说，直接上代码：

<style>
       html,body{
           height: 100%;
       }
       body{
           margin: 0;
           padding: 0;
           background-color: skyblue;
           perspective: 1000px;  
       }
       .box{
           width: 300px;
           height: 300px;
           transform-style: preserve-3d;
           margin: 200px auto;
           position: relative;
           animation: zhuanquan 5s linear 0s infinite; 
       }
       .box>div{
           position: absolute;
           float: left;
       }
       .box>div>div{
           width: 100px;