CSS: transform:旋轉 rotate、縮放 scale、平移 translate、歪斜 skew、3D 透視 perspective

transform 屬性

transform 語法用來翻轉區塊,但不適用於「行內元素」(inline element),除非把行內元素設定為 inline-block 或是 block。

*如果不清楚「行內元素」是什麼,可以參考這篇:行內元素 inline element 和區塊元素 block element
的差別。

移動或翻轉可以沿 X, Y, Z 三個座標方向,X 軸就是水平方向,Y 軸是垂直方向,而 Z 軸可以想像是從螢幕指向我們的眼睛的方向。(希望你不是坐斜斜的)

translate() 平移

translateX()translateY() 可以用來平移元素,可以為正值或負值,也可以使用長度單位或是%。

比如說 translateX(250px); 就是往右移250px、translateY(-300)就是往上移 300px。translateX() 和 translateY() 可以用 translate() 合併宣告,第一個值視為X 第二個值為 Y。

▼比如說 translate(50px, 20px),就是往右移250px 往下移 100px。

要注意 translate() 函式算是 transform 的值,而不是屬性,所以宣告方式為:

transform: translate(50px, 20px);

 

▼如果是用百分比當作單位,是以元件的寬和高為基準,比如說一個寬 200px 的元素,translateX(10%) 就會往右移 20px。

translateZ()

translateZ() 用來表示在Z軸上的移動,只能使用長度單位,不能使用% 。所有Z軸的設定都不能用百分比為單位,畢竟螢幕上那個薄薄的一片影像,預設是沒有深度的。

translate3d()

translate3d() 就是把 X, Y, Z 軸一起合併宣告,一定要宣告3個值,如:translate3d(20px, 2em, 0),不然不會作用。
當我們沒有旋轉元件時,Z 軸的位移變化是看不出來的。

 

scale() 縮放

如同 translate() 一樣 scale() 系列也包含 scaleX(), scaleY(), scaleZ() 和 scale3d()

scale() 的值為倍數,也就是 scaleX(1.5) 的意思為寬度變為 1.5 倍。

當使用 scale() 函數時 如果只宣告一個值,如 scale(2) 則表示長、寬都變兩倍,而不是只改變寬。

scaleZ() 可以讓元素沿著Z軸縮放,而 scale3d() 和 translate3d() 一樣,都需要設定三個值才會有作用。

transform-style

預設值是 flat ,但如果想要呈現個物件的3d透視關係,就要宣告為 transform-style:preserve-3d

例:未宣告(保留預設值flat),無法呈現子元件的 3d 空間關係

 

 

例:在親代元件宣告 transform-style: preserve-3d; 可以呈現出親代和子代的 3d 空間關係。

 

 

rotate() 旋轉

rotate() 函數系列還包含 rotateX(), rotateY(), rotateZ(),值的單位是角度如 deg, grad, rad, turn

▼rotateX(45deg) 意思就是以 X 軸為軸心,往上翻 45 度。

 

 

▼我們也可以用 rotate3d() 來一次設定三個維度的旋轉, retate3d() 有4個值,前三個代表 X, Y, Z 的旋轉「基於第4個值的倍數」,比如說 rotate3d(-0.5, 0.5, 1, 60deg) 意思就是以X軸為軸心往下轉30度、以Y軸為軸心往右轉30度,再往順時針方向(Z軸)轉60度。

 

 

skew() 歪斜

skew() 可以讓元素以 X 軸或 Y 軸為基準歪斜,沒有沿 Z 軸歪斜的值。

▼例:transform: skewX(20deg) 顯示為

 

▼例:transform: skewY(20deg) 顯示為

 

 

skew(a,b)

skew(a,b) 同時宣告 X 軸和 Y 軸的歪斜,但是結果和 skewX(a) 加上 skewY(b) 運算的方式不太一樣,呈現結果也有所不同。

▼例:transform: skew(-30deg, 20deg);

 

 

perspective() 透視點

perspective() 是用來表示單點透視的透視點距離,距離越長,變形越不嚴重,反之距離越短,透視效果越誇張。

perspective() 只作用在單一元件,和 perspective 屬性作用在所有子項目不一樣。

一般來說 perspective() 的值介於 500px ~ 1000px 之間看起來較自然。

▼例:transform: perspective(200px) rotateX(45deg);;

 

▼例:transform: perspective(800px) rotateX(45deg);;

 

perspective 屬性透視點

perspective 和上一段的 perspective() 不一樣,perspective() 是 transform 屬性的值,只作用在單一元素;perspective 則是作用在所有子項目。兩者使用的單位都一樣是長度單位,如px

▼transform: perspective(300px) 的例子如下,每個元素各自有自己的透視點:

▼perspective:300px; 的例子如下,各個元素共享親項目的透視點(須在親代項目宣告):

 

perspective-origin 移動透視點

表示方式為 perspective-origin: a b 初始值是 50% 50%

第一個值表示透視消失點沿 X 軸移動,小於50% 是向左移動,大於50%是向右移動,第二個值是沿Y軸移動,小於 50% 是往上移動,反之大於 50% 則是往下移動。

例:▼未移動透視點

▼移動透視點 perspective-origin: -20% 100%;

perspective-origin 的值也可以用 top, bottom, left, center, right 等來表示。

 

transform-origin 移動變形中心點

如果你有使用過 3D 軟體,或是做 2D 動畫,就會知道物件中心點的設定,對於很多動作都會產生關鍵性的影響。

transform-origin 的初始值是 50% 50% 也就是在物件長跟寬的中心點,第一個值是宣告x軸方向的位置,第二個值是宣告中心點位於y軸上的位置。如果設定 transform-origin:0 0 則中心點會落在左上角、transform-origin: 50% 100% 中心點則會居中位於元件下緣。

▼例:未更改物件中心點 rotateZ(45deg);

 

 

 

▼例:更改物件中心點transform-origin: 50% 100%; transform: rotateZ(45deg);

 

 

transform-origin 的值也可以用 top, bottom, left, center, right 等來表示。

 

backface-visibility 元件背面顯示

元件背面是否顯示,預設值是 visibility,若宣告值為 hidden 則當元素翻面時會看不見。

 

Daco

DacoNote 網站工友,有燈泡壞掉請找我。

您可能也會喜歡…