css3系列之transform 詳解scale


  scale()

  scaleX()

  scaleY()

  scaleZ()

  scale3d()

改變的不是元素的寬高,而是 X 和 Y 軸的刻度

本章有個很冷門的知識點 → scale 和 rotate 一起使用

 ——————————————————————————————————————

scaleX()

scaleY()

  縮放該元素,>1 放大, <1 縮小  默認值是 1;

 

看了上面的圖,你可能會覺得,好像是100px  變成了200px   但是實際上,並不是。變的不是 元素的 寬高。

其實,他改變的不是元素的寬高,而是x 和 y 軸的刻度 ↓ 

 

scale()

這個呢,是上面兩個的合體,也就是 參數 第一個是x 第二個是y

 

 

 

scale3d()

第一個參數是 x  第二個參數是y  第三個參數是z ,也就是scalex scaley scalez 的結合體。

scalez吧,這個值原本就是3D的,所以可能會有點難理解, 像上面這個圖, 本來就是2D 的圖,你再怎么拉伸他的Z 軸,也是看不出效果的。前提是你的圖,是3D的才能拉伸,2D的是拉伸不了的。  如果有不知道Z軸在哪里的朋友,請點這里→ rotateZ

 

探索:

首先,我們來思考一個問題,使用 rotate進行旋轉,那么 X 和 Y 軸是會跟着旋轉而變化的,那么這個時候加上 scaleX  和 Y,那么旋轉的過程中,會不會帶上scale 的效果?

先來觀察一下, 先rotate  再 scale 的效果:

看完上面的圖,是不是覺得,旋轉的時候,會帶着scale的效果一起旋轉。 但是!  如果把他倆位置換了,那結果是截然不同的,先scale 再 rotate

 

對比兩張圖,你就會發現,第一張的效果,確實是帶上了scale的效果一起旋轉的,怎么 換了個位置,就不一樣呢?

其實呢,先rotate,再scale(先旋轉,后縮放) 是會把效果帶上旋轉的,但是  先scale 再rotate(先縮放,后旋轉) 是不會把縮放的效果帶上旋轉的,縮放的效果,會留在原地,等你經過的時候,就會生效。看下面的圖解,縮放的比例,會留在原地,經過的時候,就會恢復比例。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM