CSS # 10— 2D Transform

Thomas Hung

Published in

Thomas 學習筆記

6 min readJun 15, 2020

Transform 顧名思義為變形，是讓什麼東西變形嗎？沒錯就是讓元素透過 CSS 樣式屬性設定來達到變形的效果。

要進入主題前先介紹 2D Transform 的屬性 :

Transform-origin : 元素的原始位置(參考點)

顧名思義就是在做渲染樣式前先設定元素的參考點位置，簡單說明為元素屬性的參考點
參考點為 x 軸與 y 軸，預設值為 (center , center) 中心點，此為元素渲染樣式的起始點
元素的左上角為座標 (0 , 0)，此為排版的初始位置
單位為百分比%、座標(px , px) 、方位關鍵字，如只輸入 x 軸時 y 軸會預設 center 中心點
方位關鍵字如 : center、top、right、bottom、left

2D Transform

使 <html> 中的元素(包含內容)呈現出平移、旋轉、縮放、傾斜的渲染樣式。

Transform 屬性有以下幾種 :

translate (x , y) : 平移
rotate () : 旋轉
scale(x , y) : 縮放
skew(x , y) : 傾斜

在這當中 x 與 y 分別為 x 軸與 y 軸。

translate () 屬性說明

說明 : 平移，以下範例中數字 1 為元素中心點進行平移
單位為百分比%、座標(px , px) 、方位關鍵字，如只輸入 x 軸時 y 軸會預設為 0 ，也就是只有 x 軸進行平移
它還可以細分出 X軸與 Y軸進行平移如 : translateX() 、translateY()

//**SCSS**
div{
  width:300px;
  height:300px;
  outline:2px dashed red;
 .img{
  transform:translate(100px,100px);
  display:block;
  width:100px;
  height:100px;
 }  
}//**HTML**
<div>
  <img class="img" src="https://picsum.photos/100/100/?">
</div>

rotate() 屬性說明

說明 : 旋轉，以下範例以元素左上角為中心點進行旋轉
單位為 deg，如數值為正則是順時針旋轉，反之為負則逆時針旋轉

//**SCSS**
div{
  width:300px;
  height:300px;
  outline:2px dashed red;
  display:flex;
  justify-content:center;
  align-items:center;
 .img{
  display:block;
  transform-origin:top left;  //左上角為中心點進行旋轉
  width:100px;
  height:100px;
   &:hover{
     transform:rotate(30deg);
   }
 }  
}

scale() 屬性說明

說明 : 縮放，以下範例中以元素右上角為中心點進行縮放
單位為無，只有數值為倍率
它還可以細分出 X軸與 Y軸進行縮放如 : scaleX() 、scaleY()

//**SCSS**
div{
  width:300px;
  height:300px;
  outline:2px dashed red;
  display:flex;
  justify-content:center;
  align-items:center;
 .img{
  display:block;
  transform-origin:top right;  //元素右上角為中心點進行縮放
  width:100px;
  height:100px;
   &:hover{
     transform:scale(2,1);  //X軸倍率為 2 Y軸倍率為 1
   }
 }  
}

skew() 屬性說明

說明 : 傾斜，以下範例中元素以中心點進行傾斜
單位為 deg，如數值為正則向左傾斜，反之為負則向右傾斜
它還可以細分出 X軸與 Y軸進行平移如 : skewX() 、skewY()

//**SCSS**
div{
  width:300px;
  height:300px;
  outline:2px dashed red;
  display:flex;
  justify-content:center;
  align-items:center;
 .img{
  display:block;
  width:100px;
  height:100px;
   &:hover{
     transform:skew(-30deg);
   }
 }  
}

matrix() 屬性說明

此屬性由 6 個參數值產生為變形矩陣，參數依序為: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

總結

Transform 可以在同一個元素套用多個變形屬性值，如下:

//**SCSS**
div{
  width:300px;
  height:300px;
  outline:2px dashed red;
 .img{
  display:block;
  width:100px;
  height:100px;
   &:hover{
     transform:translate(50px,100px) rotate(45deg) scale(.5);
   }
 }  
}

經由在同一個元素套用多個變形屬性值

transform:translate(50px,100px) rotate(45deg) scale(.5);

…

參考： transform 、 transform-function 、CSS 2D Transforms

以上是我對 CSS # 10–2D Transform 的學習筆記 😉。

***如果有任何想法，也歡迎留言與我分享~

***也謝謝你(妳)的閱讀，覺得有幫助的話別忘了順手拍個手喔！***