立体正方形主要涉及到了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>
