translate3d方法用来规定指定元素在三维空间中的位移。 用法比较简单，本文将通过一段代码实例动态演示translate3d的效果。 与二维空间位移相比多Z轴的位移，具体参阅CSS3 translate(x,y)一章节。 transform变换更多内容参阅CSS3 2D/3D转换一章节。 语法结构：
|
1 |
transform:translate3d(x,y,z) |
参数解析： （1）.x：表示在x轴方向的位移。 （2）.y：表示在y轴方向的位移。 （3）.z：表示在z轴方向的位移。 代码实例如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style> #box{ position:relative; height:150px; width:150px; margin-left:450px; margin-top:250px; padding:10px; border:1px solid black; perspective:1200px; } #ant{ width:100px; height:100px; text-align:center; line-height:100px; font-size:12px; border:1px solid black; background-color:yellow; transform:translate3d(0px,0px,0px); } table{ font-size:12px; width:500px; margin-left:220px; text-align:left; } .left{ text-align:right; width:150px; } </style> <script type="text/javascript"> function change(x,y,z){ var odiv = document.getElementById("ant"); var oshow = document.getElementById("show"); odiv.style.transform = "translate3d(" + x + "px," + y + "px," + z + "px)"; oshow.innerHTML = x_range.value + "/" + y_range.value + "/" + z_range.value; } window.onload=function(){ var x_range = document.getElementById("x_range"); var y_range = document.getElementById("y_range"); var z_range = document.getElementById("z_range"); x_range.onmousemove = function () { change(x_range.value, y_range.value, z_range.value); } y_range.onmousemove = function () { change(x_range.value, y_range.value, z_range.value); } z_range.onmousemove = function () { change(x_range.value, y_range.value, z_range.value); } } </script> </head> <body> <div id="box"> <div id="ant">蚂蚁部落</div> </div> <table> <tr> <td class="left">x轴位移:</td> <td><input type="range" min="-200" step="1" max="200" id="x_range" value="0"/></td> </tr> <tr> <td class="left">y轴位移:</td> <td><input type="range" min="-200" step="1" max="200" id="y_range" value="0" /></td> </tr> <tr> <td class="left">z轴位移:</td> <td><input type="range" min="-200" step="1" max="200" id="z_range" value="0" /></td> </tr> <tr> <td class="left">x/y/z:</td> <td>(<span id="show">0/0/0</span>)</td> </tr> </table> </body> </html> |
上面的代码结合JavaScript演示了translate3d方法的功能。 特别说明：如果不使用perspective属性，将看不到z轴演示效果，因为3D场景就不会有景深的Z轴。 perspective属性参阅CSS3 perspective一章节。 translate3d方法也可以拆分单独写:
|
1 2 3 |
transform:translateX(10px); transform:translateY(20px); transform:translateZ(30px); |
from:http://www.softwhy.com/article-8720-1.html
View Details