CSS3的3D转换translate3d(x,y,z)函数_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

CSS3的3D转换translate3d(x,y,z)函数_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:04 AM

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)函数一章节。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract