css 写正方形 并旋转
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 .stage { 12 position: relative; 13 margin: 300px 0 0 300px; 14 perspective: 800px; 15 width: 200px; 16 height: 200px; 17 } 18 .container { 19 width: 200px; 20 height: 200px; 21 position: absolute; 22 transform-style: preserve-3d; /* 只是一个面在旋转 设置子元素保持3d旋转 */ 23 transition: all 3s; 24 } 25 .face { 26 width: 100%; 27 height: 100%; 28 position: absolute; 29 left: 0; 30 top: 0; 31 text-align: center; 32 line-height: 200px; 33 font-size: 50px; 34 color: #fff; 35 border: 1px solid #ccc; 36 opacity: 0.3; 37 background: #999; 38 } 39 .f1 { 40 transform: rotateX(90deg) translateZ(100px); 41 background: yellow; 42 } 43 44 .f2 { 45 transform: translateZ(-100px); 46 background: green; 47 } 48 .f3 { 49 transform: rotateX(90deg) translateZ(-100px); 50 background: pink; 51 } 52 .f4 { 53 transform: translateZ(100px); 54 background: orange; 55 } 56 .f5 { 57 transform: rotateY(90deg) translateZ(100px); 58 background: blue; 59 } 60 .f6 { 61 transform: rotateY(90deg) translateZ(-100px); 62 background: darkgoldenrod; 63 } 64 /* 进行垂直翻转围绕的是X轴 */ 65 @keyframes spin-vertical { 66 from { 67 transform: rotateX(0); 68 } 69 to { 70 transform: rotateX(-360deg); 71 } 72 } 73 .stage .container { 74 transform-origin: 0 100px; 75 animation: spin-vertical 5s infinite linear; 76 } 77 </style> 78 </head> 79 <body> 80 <button id="rot">旋转</button> 81 <div class="stage"> 82 <div class="container" id="cont"> 83 <div class="face f1">1</div> 84 <div class="face f2">2</div> 85 <div class="face f3">3</div> 86 <div class="face f4">4</div> 87 <div class="face f5">5</div> 88 <div class="face f6">6</div> 89 </div> 90 </div> 91 <script> 92 //进行水平翻转围绕的是Y轴 93 var btn = document.getElementById('rot'); 94 var cont = document.getElementById('cont'); 95 btn.addEventListener('click', function() { 96 cont.style.transform = 'rotateY(180deg)'; 97 }, false); 98 </script> 99 </body> 100 </html>
思路整理：
1.首先要注意的是包裹这个立方体的div元素，为了让它有立体效果，给它设置了CSS透视属性。
.stage { position: relative; margin: 300px 0 0 300px; perspective: 800px; /*使元素以及子元素显示3D效果*/ width: 200px; height: 200px; }
2.立方体边长是200px，使用relative定位方式，这样它的那些使用绝对定位的各个面都被限制在它里面。我们使用preserve-3d属性值来让它表现出3D特征，而不是平面效果。
.container { width: 200px; height: 200px; position: absolute; transform-style: preserve-3d; /* 只是一个面在旋转 设置子元素保持3d旋转 */ transition: all 3s; }
3.各个面的显示效果和思路：
//上下面 rotateX(90deg)意为：将2个li沿着X轴旋转90度，此时垂直于上图1，构成了立方体的上下面。 translateZ(100px) ： 旋转后2个LI是在重叠在中间的，我们还需要它一个需要往上走LI边长的一半，一个下走LI边长的一半。 css代码： li:nth-of-type(2) { background: rgba(255, 10, 230, 0.5); transform: rotateX(90deg) translateZ(100px) } li:nth-of-type(3) { background: rgba(0, 10, 230, 0.5); transform: rotateX(90deg) translateZ(-100px) } //上下面结束 //左右面 左右面的原理跟上下面一样，只不过是沿着Y轴旋转，这样才能形成左右面 li:nth-of-type(4) { background: rgba(25, 100, 230, 0.5); transform: rotateY(90deg) translateZ(100px) } li:nth-of-type(5) { background: rgba(0, 10, 71, 0.5); transform: rotateY(90deg) translateZ(-100px) } //左右面结束 //前后面：前后面不用旋转，直接一个往前走边长一半，一个向后走一半即可 li:nth-of-type(1) { background: rgba(40, 200, 100, 1); transform: translateZ(100px) } li:nth-of-type(6) { background: rgba(255, 35, 30, 0.5); transform: translateZ(-100px) }
4.旋转 (同时保持透视效果)
水平旋转rotateY
垂直旋转rotateX