CSS3 scale3d(x,y,z)
關於transform變換更多內容可以參閱CSS3 2D/3D轉換一章節。
此方法用來規定元素在三維空間中的縮放功能。
與二維空間的縮放相比,多了Z軸的縮放,具體可以參閱CSS3 scale(x,y)一章節。
語法結構:
[CSS] 純文字檢視 複製程式碼scale3d(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; position:absolute; border:1px solid black; background-color:yellow; transform:scale3d(1,1,1); } 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 = "scale3d(" + x + "," + y + "," + z + ")"; 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="0" step="1" max="10" id="x_range" value="1"/></td> </tr> <tr> <td class="left">y軸放大:</td> <td><input type="range" min="0" step="1" max="10" id="y_range" value="1" /></td> </tr> <tr> <td class="left">z軸放大:</td> <td><input type="range" min="0" step="1" max="10" id="z_range" value="1" /></td> </tr> <tr> <td class="left">x/y/z:</td> <td>(<span id="show">1/1/1</span>)</td> </tr> </table> </body> </html>
上面的程式碼演示了縮放效果;x和y軸比較明顯,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; position:absolute; border:1px solid black; background-color:yellow; transform:scale3d(1,1,1) rotateX(45deg); } 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 = "scale3d(" + x + "," + y + "," + z + ") " + "rotateX(45deg)";; 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="0" step="1" max="10" id="x_range" value="1"/></td> </tr> <tr> <td class="left">y軸放大:</td> <td><input type="range" min="0" step="1" max="10" id="y_range" value="1" /></td> </tr> <tr> <td class="left">z軸放大:</td> <td><input type="range" min="0" step="1" max="10" id="z_range" value="1" /></td> </tr> <tr> <td class="left">x/y/z:</td> <td>(<span id="show">1/1/1</span>)</td> </tr> </table> </body> </html>
讓元素旋轉一定的角度,這樣在z軸的演示就比較明顯了。
特別說明:如果不使用perspective屬性,將看不到z軸演示效果,因為3D場景就不會有景深的Z軸,關於perspective屬性可以參閱CSS3 perspective一章節。
在z軸上的縮放理解起來可能會有一點點的困難,下面再簡要介紹一下:
一個三維空間效果圖,就像一個牆角,那麼在z軸方向縮放從側面看的話,可以用如下圖示表示:
藍色的為z軸,這是從側面看的效果,紅色斜線表示被縮放的div塊側邊,兩個豎向紅色線可以想象為兩堵牆,那麼div在軸的縮放可以理解為兩堵牆擠壓和拉伸,是不是這樣就很明顯了。
scale3d()函式也可以拆分單獨寫:
[CSS] 純文字檢視 複製程式碼transform:scaleX(1); transform:scaleY(2); transform:scaleZ(3);
相關文章
- CSS3 translate3d(x,y,z)CSSS33D
- CSS3 rotate3d(x,y,z,angle)CSSS33D
- CSS3 scale(x,y)CSSS3
- CSS3 translate(x,y)CSSS3
- CSS translate3d(x,y,z)CSS3D
- 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軸,過點觸驗證碼