你的位置:首页 > 网页设计

[网页设计]CSS3的3D转换translate3d(x,y,z)函数


CSS3的3D转换translate3d(x,y,z)函数:
translate3d(x,y,z)只是规定3D转换的一种形式,更多相关内容可以参阅CSS3的3D转换效果详解介绍一章节。
此函数用来规定指定元素在三维空间中的位移。
语法结构:

translate3d(x,y,z)

参数解析:
1.x:表示在x轴方向的位移。
2.y:表示在y轴方向的位移。
3.z:表示在z轴方向的位移。
代码实例:
1.x轴方向的位移:

<!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;}#inner{ width:100px; height:100px; text-align:center; line-height:100px; font-size:12px; position:absolute; border:1px solid black; background-color:yellow;   transform:translate3d(0px,0,0);  -ms-transform:translate3d(0px,0,0); -webkit-transform:translate3d(0px,0,0); -o-transform:translate3d(0px,0,0); -moz-transform:translate3d(0px,0,0);}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(value){  var oinner=document.getElementById('inner');  var oshow=document.getElementById('show');    oinner.style.transform="translate3d("+value+"px,0,0)";  oinner.style.msTransform="translate3d("+value+"px,0,0)";  oinner.style.webkitTransform="translate3d("+value+"px,0,0)";  oinner.style.MozTransform="translate3d("+value+"px,0,0)";  oinner.style.OTransform="translate3d("+value+"px,0,0)";    oshow.innerHTML=value; } window.onload=function(){  var range=document.getElementById("range");  range.onmousemove=function(){   change(this.value);  } } </script> </head><body><div id="box"> <div id="inner">蚂蚁部落</div></div><table>  <tr>   <td class="left">x轴位移:</td>   <td><input type="range" min="-200" step="1" max="200" id="range" value="0"/></td>  </tr>  <tr>   <td class="left">x:</td>   <td>(<span id="show">0</span>)</td>  </tr> </table> </body> </html>

拖动按钮可以实现x轴方向位移的演示,一切都很清楚。
2.y轴方向的位移:

<!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;}#inner{ width:100px; height:100px; text-align:center; line-height:100px; font-size:12px; position:absolute; border:1px solid black; background-color:yellow;   transform:translate3d(0,0px,0);  -ms-transform:translate3d(0,0px,0);  -webkit-transform:translate3d(0,0px,0);  -o-transform:translate3d(0,0px,0);  -moz-transform:translate3d(0,0px,0); }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(value){  var oinner=document.getElementById('inner');  var oshow=document.getElementById('show');    oinner.style.transform="translate3d(0,"+value+"px,0)";  oinner.style.msTransform="translate3d(0,"+value+"px,0)";  oinner.style.webkitTransform="translate3d(0,"+value+"px,0)";  oinner.style.MozTransform="translate3d(0,"+value+"px,0)";  oinner.style.OTransform="translate3d(0,"+value+"px,0)";    oshow.innerHTML=value; } window.onload=function(){  var range=document.getElementById("range");  range.onmousemove=function(){   change(this.value);  } } </script> </head><body><div id="box"> <div id="inner">蚂蚁部落</div></div><table>  <tr>   <td class="left">y轴位移:</td>   <td><input type="range" min="-200" step="1" max="200" id="range" value="0"/></td>  </tr>  <tr>   <td class="left">y:</td>   <td>(<span id="show">0</span>)</td>  </tr> </table> </body> </html>

拖动按钮可以实现Y轴方向位移的演示,一切都很清楚。
3.z轴方向位移:

<!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;   -webkit-perspective:1200px; -moz-perspective:1200px; -ms-perspective:1200px; -o-perspective:1200px; perspective:1200px;}#inner{ width:100px; height:100px; text-align:center; line-height:100px; font-size:12px; position:absolute; border:1px solid black; background-color:yellow;   transform:translate3d(0,0,0);  -ms-transform:translate3d(0,0,0);  -webkit-transform:translate3d(0,0,0);  -o-transform:translate3d(0,0,0);  -moz-transform:translate3d(0,0,0); }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(value){  var oinner=document.getElementById('inner');  var oshow=document.getElementById('show');    oinner.style.transform="translate3d(0,0,"+value+"px)";  oinner.style.msTransform="translate3d(0,0,"+value+"px)";  oinner.style.webkitTransform="translate3d(0,0,"+value+"px)";  oinner.style.MozTransform="translate3d(0,0,"+value+"px)";  oinner.style.OTransform="translate3d(0,0,"+value+"px)";    oshow.innerHTML=value; } window.onload=function(){  var range=document.getElementById("range");  range.onmousemove=function(){   change(this.value);  } } </script> </head><body><div id="box"> <div id="inner">蚂蚁部落</div></div><table>  <tr>   <td class="left">z轴位移:</td>   <td><input type="range" min="-200" step="1" max="200" id="range" value="0"/></td>  </tr>  <tr>   <td class="left">z:</td>   <td>(<span id="show">0</span>)</td>  </tr> </table> </body> </html>

以上代码演示了我们的效果,当值越大时。视觉效果越大,值越小时,视觉效果越小,这个也应该很好理解,离的越近自然就越大,离的越远自然就看起来越小了。此代码和上面两个代码最大的区别在于应用了perspective属性,如果不使用此属性,将看不到演示效果,因为3D的场景就不会有景深的Z轴,关于perspective属性可以参阅CSS3的perspective属性详解一章节。 
translate3d()函数也可以拆分单独写:

transform:translateX(10px); transform:translateY(20px); transform:translateZ(30px);

这里就不多介绍了,非常的简单,一看就明白。

原文地址是:CSS3的3D转换translate3d(x,y,z)函数一章节。