4-14 transform ( 轉變 )
transform ( 轉變 )：針對元素進行位移、旋轉、縮放和傾斜。
以下說明以介紹 2D 為主
相關屬性列表
transform ( 轉變 ) 屬性列表
其他屬性說明，詳：w3schools(英) / runoob(中)
| 用意 | 屬性值 | 說明 |
|---|---|---|
| 不進行轉換 | none | 預設值 |
| 位移 | translate(x,y) 、translate3d(x,y,z) 、 translateX(x) 、 translateY(y) 、 translateZ(z) |
單位：px、%、em、rem... |
| 尺寸縮放 | scale(值) 、 scale(x,y) 、 scale3d(x,y,z) 、 scaleX(x) 、 scaleY(y) 、 scaleZ(z) |
其值：0 ~ 1 |
| 旋轉角度 | rotate(angle) 、 rotate3d(x,y,z,angle) 、 rotateX(angle) 、 rotateY(angle) 、 rotateZ(angle) |
單位：deg |
| 傾斜 | skew(x-angle,y-angle) 、 skewX(angle) 、 skewY(angle) | 單位：deg |
perspective ( 元素距離視圖的距離 ) 屬性列表
perspective的設定值只要設定距離長度，其屬性需要設定在父元素。
transform-origin ( 轉變基準點 ) 屬性列表
其他屬性說明，詳：w3schools(英) / runoob(中)
transform-origin: x-axis y-axis z-axis;
| 屬性值 | 說明 |
|---|---|
| x-axis | X 軸位置，其值：left、center、right、length、% |
| y-axis | Y 軸位置，其值：top、center、bottom、length、% |
| z-axis | Z 軸位置，其值：length |
transform ( 轉變 ) 呈現結果
rotate ( 旋轉 )
rotate(45deg)
rotateX(45deg)
rotateY(45deg)
rotateZ(45deg)
scale ( 尺寸縮放 )
scale(1.5)
scaleX(1.5)
scaleY(1.5)
skew ( 傾斜 )
skew(30deg, 30deg)
skewX(30deg)
skewY(30deg)
translate ( 位移 )
translate(45px)
translateX(45px)
translateY(45px)
Perspective ( 透視圖 )
perspective:100
transform : rotateX(90deg)
perspective:200
transform : rotateX(90deg)
perspective:100
transform : rotateX(45deg)
perspective:200
transform : rotateX(45deg)
Transform origin ( 轉變基準點 )
transform-origin: x-axis y-axis z-axis;
transform-origin : 100% 0 0 ;
transform : rotate (45deg) ;
transform-origin : 0 100% 0 ;
transform : rotate (45deg) ;
perspective:200 px ;
transform-origin : 0 100% 0 ;
transform : rotateX (45deg) ;
perspective:200 px ;
transform-origin : 100% 0 0 ;
transform : rotateX (45deg) ;
perspective:200 px ;
transform-origin : 0 100% 0 ;
transform : rotateY (45deg) ;
perspective:200 px ;
transform-origin : 100% 0 0 ;
transform : rotateY (45deg) ;
transform : scale (2) ;
transform-origin : 100% 0 0 ;
transform : scale (2) ;
transform-origin : 0 100% 0 ;
transform : scale (2) ;
transform-origin : 100% 0 0 ;
transform : scaleX (2) ;
transform-origin : 0 100% 0 ;
transform : scaleX (2) ;
transform-origin : 100% 0 0 ;
transform : scaleY (2) ;
transform-origin : 0 100% 0 ;
transform : scaleY (2) ;
