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，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

HTML行動：網站結構的示例May 05, 2025 am 12:03 AM

HTML用於構建結構清晰的網站。 1)使用標籤如、、定義網站結構。 2)示例展示了博客和電商網站的結構。 3)避免常見錯誤如標籤嵌套不正確。 4)優化性能通過減少HTTP請求和使用語義化標籤。

您如何將圖像插入HTML頁面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

HTML的目的：啟用Web瀏覽器可以顯示內容May 03, 2025 am 12:03 AM

HTML的核心目的在於讓瀏覽器理解並展示網頁內容。 1.HTML通過標籤定義網頁結構和內容，如、到、等。 2.HTML5增強了多媒體支持，引入了和標籤。 3.HTML提供了表單元素，支持用戶交互。 4.優化HTML代碼可提升網頁性能，如減少HTTP請求和壓縮HTML。

為什麼HTML標籤對Web開發很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）semantictagsimproveaccessibilityandseo.2）semanteLayOut，語義和互動性。 3）poseriblesibilityandseoandseo.3）poseriblesoftagscanoftagscanoftagscanoptagscanoptimizeperefeneandimizeanDenSuroceRecRoscRoss-BrowserCrowserCercerComercompatibility。

See all articles