立体正方形的实现

　　立体正方形主要涉及到了CSS3的3D，所以需要熟悉这一部分的内容。

　　而transform中使用rotate务必牢记一点，即旋转的时候，是旋转的坐标系，所以旋转后的平面相对于它自身的坐标系来说是不变的。这也就是为什么所有的平面都是`translateZ(100px)`的原因。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 8         .box {
 9             width: 500px;
10             height: 500px;
11             transform-style: preserve-3d;
12             position: relative;
13             margin: 200px auto;
14             transform: rotate3d(1, 1, 1, 15deg);
15         }
16 
17         .minbox {
18             width: 200px;
19             height: 200px;
20             font-size: 40px;
21             color: #fff;
22             text-align: center;
23             line-height: 200px;
24             background-color: skyblue;
25             opacity: 0.3;
26             position: absolute;
27             top: 0;
28             left: 0;
29             border: 1px solid green;
30         }
31         .box1 {
32             transform: translateZ(100px);
33         }
34         .box2 {
35             transform: rotateX(180deg) translateZ(100px);
36         }
37         .box3 {
38             transform: rotateY(-90deg) translateZ(100px);
39         }
40         .box4 {
41             transform: rotateY(90deg) translateZ(100px);
42         }
43         .box5 {
44             transform: rotateX(-90deg) translateZ(100px);
45         }
46         .box6 {
47             transform: rotateX(90deg) translateZ(100px);
48         }
49     </style>
50 </head>
51 <body>
52     <div class="box">
53         <div class="minbox box1">前</div>
54         <div class="minbox box2">后</div>
55         <div class="minbox box3">左</div>
56         <div class="minbox box4">右</div>
57         <div class="minbox box5">上</div>
58         <div class="minbox box6">下</div>
59     </div>
60 
61     <script>
62         obj = document.getElementsByClassName('box')[0];
63         obj.addEventListener('mouseenter',function(){
64             this.style.transition = 'all 5s';
65             this.style.transform = 'rotate3d(1, 1, 1, 300deg)';
66         });
67         obj.addEventListener('mouseleave', function(){
68             this.style.transition = 'all 5s';
69             this.style.transform = 'rotate3d(1, 1, 1, 15deg)';
70         });
71     </script>
72 </body>
73 </html>