Maison > Article > interface Web > CSS3的3D转换translate3d(x,y,z)函数_html/css_WEB-ITnose
CSS3的3D转换translate3d(x,y,z)函数_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 09:04:164872parcourir
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)函数一章节。
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：通过yeoman、gulp、angular编写前段时的html模板处理，打包后找不到html的问题解决_html/css_WEB-ITnoseArticle suivant：浏览器不兼容的问题_html/css_WEB-ITnose