CSS3之_迷之transform
这段时间学习css3的时候，想用transfrom以及transition做一个简单的正方体旋转，然后。。就晕倒在坐标系这块。
一直以为坐标轴是永恒不变的，（z正轴是指向屏幕外的方向，y是垂直方向，x是水平方向）。
然后我的愉快的开始做正方体，发现WTF!这根本没按照我的想法走。剧本不是这么写的。
于是有了这段知识（见下文——摘自：http://www.tuicool.com/articles/2muqU3）
我们都可能像 transform: rotateY(45deg) translateX(100px); 这样使用多个变换函数。这种时候，需要意识到变换函数的顺序。这是因为， 每一个变换函数不仅改变了元素，同时也会改变和元素关联的transform坐标系 ，当变换函数依次执行时，后一个变换函数总是基于前一个变换后的新transform坐标系。
由于坐标系会随着每一次变换发生改变，因此不同顺序的情况下，元素最终的位置也不同。
对此还有一种解释，即变换函数是通过数学上的矩阵乘法运算完成的，而矩阵的乘法是不满足交换律的。任意坐标空间内的变换函数或者变换函数的组合，都可以转换为一个矩阵（还有一个矩阵小工具 可以帮你做这个转换）。
呃，或许是我数学没学好。
下面贴一下效果和代码：
html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>正方体</title> 5 <meta charset="utf-8"> 6 <link href="style.css" rel="stylesheet" type="text/css"/> 7 <script src="script.js"></script> 8 </head> 9 <body> 10 <div class="my3d"> 11 <div class="content" id="content"> 12 <div class="page" id="page1">1</div> 13 <div class="page" id="page2">2</div> 14 <div class="page" id="page3">3</div> 15 <div class="page" id="page4">4</div> 16 <div class="page" id="page5">5</div> 17 <div class="page" id="page6">6</div> 18 </div> 19 </div> 20 21 <div class="rotate-range"> 22 <p>rotate x: <span id="rotax-span">0</span> deg</p> 23 <input type="range" min="-360" max="360" id="rotatex" value="0" onchange="rotate()" /><br/> 24 <p>rotate y: <span id="rotay-span">0</span> deg</p> 25 <input type="range" min="-360" max="360" id="rotatey" value="0" onchange="rotate()" /><br/> 26 <p>rotate z: <span id="rotaz-span">0</span> deg</p> 27 <input type="range" min="-360" max="360" id="rotatez" value="0" onchange="rotate()" /><br/> 28 </div> 29 30 31 32 </body> 33 </html>
css:
html, body, div, span, h1, h2, h3, h4, h5, h6, p a, img, ol, ul, li { margin:0;padding:0;border:0;outline:0; } .wrapper{ width: 70%; border: 3px solid black; } .my3d{ height: 370px; width: 100%; perspective:800; -webkit-perspective:800; -moz-perspective:800; -ms-perspective:800; -o-perspective:800; perspective-origin:50% 50%; -webkit-perspective-origin:50% 50%; -moz-perspective-origin:50% 50%; -ms-perspective-origin:50% 50%; -o-perspective-origin:50% 50%; overflow:hidden; } .content{ height:160px; width:160px; position:relative; margin: 100px auto; transform-style:preserve-3d; -weibit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; -o-transform-style:preserve-3d; } .page{ color:white; width:160px; height:160px; background:black; font-size:180px; line-height:180px; text-align:center; padding:0px; position:absolute; transition:all 1s linear; -weibit-transition:all 1s linear; -moz-transition:all 1s linear; -ms-transition:all 1s linear; -o-transition:all 1s linear; } #page1{ transform:translateZ(80px); -ms-transform:translateZ(80px); -moz-transform:translateZ(80px); -webkit-transform:translateZ(80px); -o-transform:translateZ(80px); } #page2{ transform:rotateY(90deg) translateZ(80px); -ms-transform:rotateY(90deg) translateZ(80px); -moz-transform:rotateY(90deg) translateZ(80px); -webkit-transform:rotateY(90deg) translateZ(80px); -o-transform:rotateY(90deg) translateZ(80px); } #page3{ transform:rotateY(90deg) translateZ(-80px); -ms-transform:rotateY(90deg) translateZ(-80px); -moz-transform:rotateY(90deg) translateZ(-80px); -webkit-transform:rotateY(90deg) translateZ(-80px); -o-transform:rotateY(90deg) translateZ(-80px); } #page4{ transform:rotateX(90deg) translateZ(-80px); -ms-transform:rotateX(90deg) translateZ(-80px); -moz-transform:rotateX(90deg) translateZ(-80px); -webkit-transform:rotateX(90deg) translateZ(-80px); -o-transform:rotateX(90deg) translateZ(-80px); } #page5{ transform:rotateX(90deg) translateZ(80px); -ms-transform:rotateX(90deg) translateZ(80px); -moz-transform:rotateX(90deg) translateZ(80px); -webkit-transform:rotateX(90deg) translateZ(80px); -o-transform:rotateX(90deg) translateZ(80px); } #page6{ transform:translateZ(-80px); -ms-transform:translateZ(-80px); -moz-transform:translateZ(-80px); -webkit-transform:translateZ(-80px); -o-transform:translateZ(-80px); } .rotate-range{ margin-left: 400px; } .rotate-range input{ display:block; width:400px; }
JS:
1 function rotate(){ 2 var content = document.getElementById("content"); 3 var rotexspan = document.getElementById("rotax-span"); 4 var roteyspan = document.getElementById("rotay-span"); 5 var rotezspan = document.getElementById("rotaz-span"); 6 7 var rotex = document.getElementById("rotatex").value; 8 var rotey = document.getElementById("rotatey").value; 9 var rotez = document.getElementById("rotatez").value; 10 11 12 13 content.style.transform="rotateX("+rotex+"deg) rotateY("+rotey+"deg) rotate("+rotez+"deg)"; 14 rotexspan.innerHTML=rotex; 15 roteyspan.innerHTML=rotey; 16 rotezspan.innerHTML=rotez; 17 }
效果展示：( chorme和safari下效果比较好，由于perspective的浏览器兼容)
By the way,IE不支持3d效果。
1
2
3
4
5
6
rotate x: 0 deg
rotate y: 0 deg
rotate z: 0 deg
以上内容，如有错误请指出，不甚感激。
