2D轉換

1. 2D 轉換

• 2D 轉換是改變標籤在二維平面上的位置和形狀

• 轉換（transform）是CSS3中具備顛覆性的特徵之一，能夠實現元素的位移、旋轉、變形、縮放。

  • 移動： translate

  • 旋轉： rotate

  • 縮放： scale

  • 傾斜：skew

1.1.二維座標系

2D轉換是改變標籤在二維平面上的位置和形狀的一種技術，先來學習二維座標系

2. 2D 轉換之 translate

2D移動是2D轉換裏面的一種功能，能夠改變元素在頁面中的位置，相似定位。

2.1. translate 語法

• x 就是 x 軸上水平移動
• y 就是 y 軸上水平移動

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
複製代碼

2.2. 重點知識點

• 2D 的移動主要是指 水平、垂直方向上的移動
• translate 最大的優勢就是不影響其餘元素的位置
• translate 中的100%單位，是相對於自己的寬度和高度來進行計算的
• 行內標籤沒有效果

2.3. 代碼演示

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移動 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移動 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移動 100px */
  /* transform: translate(0, 100px) */

  /* 水平移動 100px */
  /* transform: translateX(100px); */

  /* 垂直移動 100px */
  transform: translateY(100px)
}
複製代碼

3.2D 轉換 rotate

3.1. rotate 旋轉

• 2D 旋轉指的是讓元素在二維平面內順時針或者逆時針旋轉

3.2. rotate 語法

使用步驟：

• 給元素添加轉換屬性 transform

• 屬性值爲 rotate(角度) 如 transform:rotate(30deg) 順時針方向旋轉30度

  /* 單位是：deg */
  transform: rotate(度數) 
  複製代碼

3.3. 重點知識點

• rotate 裏面跟度數，單位是 deg
• 角度爲正時，順時針，角度爲負時，逆時針
• 默認旋轉的中心點是元素的中心點
• 經過左手法則，大拇指朝正軸方向，判斷正反方向

3.4.設置旋轉中心點

3.4.1.transform-origin 基礎語法

/* 設置旋轉中心點*/
transform-origin: x y;
複製代碼

3.4.2.重要知識點

• 注意後面的參數 x 和 y 用空格隔開
• x y 默認旋轉的中心點是元素的中心 (50% 50%)，等價於 center center
• 還能夠給 x y 設置像素或者方位名詞(top、bottom、left、right、center)

3.5. 代碼演示

img:hover {
  transform: rotate(360deg)
}
複製代碼

3.6.css3三角

• 實現三角的方式有不少種：例如圖標、文字符號、邊框加旋轉、純邊框…
• 平常開發中，最經常使用的是圖標方式，最不常使用文字符號實現

4.2D 轉換之 scale

4.1. scale 的做用

• 用來控制元素的放大與縮小

4.2. 語法

transform: scale(x, y)
複製代碼

4.3. 知識要點

• 注意，x 與 y 之間使用逗號進行分隔
• transform: scale(1, 1): 寬高都放大一倍，至關於沒有放大
• transform: scale(2, 2): 寬和高都放大了二倍
• transform: scale(2): 若是隻寫了一個參數，第二個參數就和第一個參數一致
• transform:scale(0.5, 0.5): 縮小
• scale 最大的優點：能夠設置轉換中心點縮放，默認以中心點縮放，並且不影響其餘盒子

4.4. 代碼演示

div:hover {
	   /* 注意，數字是倍數的含義，因此不須要加單位 */
	   /* transform: scale(2, 2) */
   
	   /* 實現等比縮放，同時修改寬與高 */
	   /* transform: scale(2) */
   
	   /* 小於 1 就等於縮放*/
	   transform: scale(0.5, 0.5)
   }
複製代碼

5. 2D 轉換綜合寫法以及順序問題

5.1. 知識要點

• 同時使用多個轉換，其格式爲 transform: translate() rotate() scale()
• 順序會影響到轉換的效果(先旋轉會改變座標軸方向)
• 但咱們同時有位置或者其餘屬性的時候，要將位移放到最前面

5.2. 代碼演示

div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}
複製代碼