CSS3 translate3d(x,y,z)
translate3d方法用來規定指定元素在三維空間中的位移。
與二維空間位移相比多Z軸的位移,具體參閱CSS3 translate(x,y)一章節。
transform變換更多內容參閱CSS3 2D/3D轉換一章節。
語法結構:
[CSS] 純文字檢視 複製程式碼transform:translate3d(x,y,z)
引數解析:
(1).x:表示在x軸方向的位移。
(2).y:表示在y軸方向的位移。
(3).z:表示在z軸方向的位移。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!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方法也可以拆分單獨寫:
[CSS] 純文字檢視 複製程式碼transform:translateX(10px); transform:translateY(20px); transform:translateZ(30px);
相關文章
- CSS translate3d(x,y,z)CSS3D
- CSS3 scale3d(x,y,z)CSSS33D
- CSS3 rotate3d(x,y,z,angle)CSSS33D
- CSS3 scale(x,y)CSSS3
- CSS3 translate(x,y)CSSS3
- X+Y+Z=2的黑洞恆等式恆等式
- CSS rotate3d(x,y,z,angle)CSS3D
- X+Y+Z+T=3的黑洞恆等式恆等式
- X,Y,Z任意的三項齊次恆等式恆等式
- X,Y,Z,T任意的四項齊次恆等式恆等式
- 1152:最大數max(x,y,z)(C C++)C++
- X,Y,Z,T,V任意的五項齊次恆等式恆等式
- X^a+Y^a=Z^a成立之下的齊次3項恆等式恆等式
- 四、有一行電文,已按下面規律譯成密碼:A-->Z B-->Y C-->X a-->z b-->y c-->x...密碼
- 『指數a,b,c,d無上下限:X+Y+Z=1的恆等式』恆等式
- event_x ()、event_y ()、event_x_root ()、event_y_root ()
- Python中x=y與x==y的區別。(比較簡單)Python
- ROUND(x,y)與TRUNC(x,y)函式中y引數值為省略、空值與null的區別函式Null
- X^2+Y^2=Z^2成立之下的齊次3項恆等式恆等式
- X^3+Y^3=Z^3成立之下的齊次3項恆等式恆等式
- Snapkit,呼叫layoutIfNeeded後x、y為負數。APK
- vivo X21和vivo Y83區別對比 vivo Y83和X21哪個好?
- Connection to x as user y failed: ERROR: Wrong password for userAIError
- python函式每日一講 - cmp(x,y)Python函式
- 阿里227x82y純算篇阿里
- OPPO A7X和vivo Y97區別對比 vivo Y97和OPPO A7X哪個好?
- clientX/Y pageX/Y offsetX/Y layerX/Y screenX/Y clientHeight innerWidth...client
- ClubIntel:Y世代和Z世代對健身行業的影響Intel行業
- Python實現雙X軸雙Y軸繪圖Python繪圖
- 『指數a,b無上下限:X+Y=1的恆等式』恆等式
- js中根據x,y 座標模擬點選事件JS事件
- 『指數無上下限X,Y任意的2項恆等式(3)』恆等式
- 『指數無上下限X,Y任意的2項恆等式(1)』恆等式
- 『指數無上下限X,Y任意的2項恆等式(2)』恆等式
- C/C++—— 輸入兩點座標(X1,Y1),(X2,Y2),計算並輸出兩點間的距離C++
- 為什麼遊戲要提供視角X\Y軸反轉功能?遊戲
- (函式分治法)實現pow函式(x的y次方冪)函式
- 實戰4-x軸y軸,過點觸驗證碼