CSS3轉換(transform)基本用法介紹

二森發表於2021-07-05
CSSS3ORM

一個炫酷的網頁離不開css的transform、transition、animation三個屬性，之前一直沒有涉及到這塊內容，剛好最近要做一個相關東西，趁此機會好好學一學這三個屬性。

一、功能

實現元素的平移、旋轉、縮放或傾斜。

二、 實現條件

只能轉換由盒模型定位的元素。

三、 基本語法

  1. transform: none
    不應用任何變換

  2. transform: <transform-function>
    應用一個或多個<transform-function>值，以空格分開

     <transform-function>是啥？
 它是css中的一種資料型別，用於對元素的顯示做變換。包括二維變換和三維變換。

四、 實現方式

1. 變形原點

在介紹轉換之前需要先介紹一下變形原點，即轉換的基點。

(1) 語法

  • transform-origin：初始值為(50%, 50%, 0)，即center。其屬性值有：

    • 一個值：
      必須是<length>, <percentage>, 或 left, center, right, top, bottom關鍵字中的一個。如果是<length>, <percentage>則表示x-offset，如果是keyword則表示其應有的意思。（即left、right是橫向的，top、bottom是縱向的，center是中間的）

    • 兩個值：

      • 一個值是<length>, <percentage>, 或 left, center, right關鍵字中的一個。表示距離和模型左側的偏移值（即x-offset或x-offset-keyword）
      • 另一個值是<length>, <percentage>, 或 top, center, bottom關鍵字中的一個。表示距離和模型頂部的偏移值（即y-offset或y-offset-keyword）
        • 如果第一個值是<length>, <percentage>, left, right，則表示x軸的偏移，另一個值必須是y-offset或y-offset-keyword（top、bottom）。
        • 如果第一個值是top,bottom，則表示y軸的偏移，另一個值可以是<length>, <percentage>或 left, right表示x軸的偏移。
        • 如果第二個值是left或right，則第二個值表示x軸的，那麼第一個值可以是, <percentage>或 top, bottom表示y軸的偏移。
          (聽起來好繞hhh，但其實不復雜，意思就是兩個值對於x，y的順序沒有規定死，可以自定義，一個表示x軸，那另一個值必須得用y軸的。但如果倆都是值的話，那第一個是x，第二個是y)

    • 三個值：

      • 前兩個值同只有兩個值時的用法相同。
      • 第三個值必須得是<length>。表示Z軸偏移量。

    • PS：keyword與value的值對應關係如下：

      • left —— 0%
      • center —— 50%
      • right —— 100%
      • top —— 0%
      • bottom —— 100%

(2) 示例
image

2. 平移

（1） 語法

  • 二維：translate(tx, ty)
    引數：
    • tx: 要移動向量的橫座標。
    • ty: 要移動向量的縱座標。可以不寫，預設為0。
  • 三維：translate3d(tx, ty, tz)
    引數：
    • tx: 移動向量的橫座標。
    • ty: 移動向量的縱座標。
    • tz: 移動向量的z軸座標。不能使用百分比，否則會被認為無效屬性！
  • translateX(t)、translateY(t)、translateZ(t)
    不用多說了，分別是translate(tx, 0)、translate(0, ty)、translate3d(0, 0, tz)的簡寫形式。

（2） 示例

<div class="transform-div"></div>

.transform-div {
  width: 200px;
  height: 200px;
  background-color: orange;
  transform: translate(300px, 10%);
}

image

3. 旋轉

(1) 語法

  • 二維： rotate(a)

    • 引數：表示旋轉的角度。正角表示順時針旋轉，負角表示逆時針旋轉。

  • 三維： rotate3d(x, y, z, a)

    • 效果：3D旋轉，繞著固定軸旋轉。旋轉軸由[x,y,z]向量定義，且過原點（由transform-origin定義）。[x,y,z]向量需要標準化，即三個座標平方和為1，但如果沒有標準化也沒事，因為它在內部會被標準化，但對於不能被標準化的向量，如空向量，會導致旋轉不被應用，但不會影響整個CSS屬性。
    • 引數：
      • x、y、z: 顧名思義，分別是旋轉向量的x、y、z座標，都為<number>
      • a: 旋轉角度。正值表示順時針，負值表示逆時針。

  • rotateX(a), rotateY(a), rotateZ(a)：分別是rotate3D(1, 0, 0, a), rotate3D(0, 1, 0, a), rotate3D(0, 0, 1, a)的簡寫。

(2) 示例

<div class="container">
	<div class="line1"></div>
	<div class="line2"></div>
	<div class="transform-div"></div>
</div>

.container {
	width: 400px;
	height: 400px;
	border: 4px solid;
	position: relative;
}
.transform-div {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -100px;
	width: 200px;
	height: 200px;
	background-color: orange;
	transition: all 1s;
	transform: none;
	opacity: 0.7;
}

.transform-div:hover {
	transform: rotateY(-45deg);
}

.line1 {
	position: absolute;
	width: 100%;
	height: 50%;
	border-bottom: 2px solid;
}

.line2 {
	position: absolute;
	top: 0;
	height: 100%;
	width: 50%;
	border-right: 2px solid;
}

（截圖看到的效果不是很清晰，可以複製上述程式碼看一下旋轉效果）
image
image

4. 縮放

(1) 語法

  • 二維： scale(sx) 或 scale(sx, sy)

    • 效果：分別在x方向和在y方向放大or縮小一定的倍數，不同方向上的放大/縮小倍數可以不同。
    • 引數：
      • sx：縮放向量的橫座標，為<number>值。
      • sy：縮放向量的縱座標，為<number>值。可以不存在，若不存在，則預設值與sx相同，即元素均勻縮放。
      • 值的大小在[-1,1]時，元素為縮放；大小在[-1,1]範圍外時，為放大元素；當等於1時，什麼都不做；當為負值時，執行點反射和大小修改。

  • 三維： scale3d(sx, sy, sz)

    • 引數：分別表示在橫軸、縱軸、z軸的縮放大小。

5. 傾斜

(1) 語法

  • skew(ax) 或 skew(ax, ay)
    • 引數：ax、ay表示沿橫、縱座標扭曲元素的程度。是一個角度。
  • skewX(a)
    • 效果：水平拉伸，將元素每個點在水平方向上扭曲一定程度。
    • 引數：是一個角度，表示用於沿著橫座標扭曲元素的角度。
  • skewY(a)
    • 效果：垂直拉伸，將元素每個點在垂直方向上扭曲一定程度。
    • 引數：是一個角度，表示用於沿著縱座標扭曲元素的角度。

(2) 示例
image

【補充】CSS角度單位：deg（度）、grad（梯度）、rad（弧度）、turn（圓、圈）
180deg = 200grad = 0.5turn = Π

6. 複合變換

  • 複合變換順序：按從左到右的順序。（這個順序我自己沒有很理解，我試了幾個，只要沒有旋轉，無論順序如何，得到的結果都是一樣的，不懂原理，於是網上查了查，發現了這篇部落格：https://www.cnblogs.com/xljzlw/p/4966798.html 值得參考。在旋轉的時候，座標系也會跟著旋轉，所以旋轉的順序至關重要，如下示例：）

示例：
image

【解釋】如上圖所示，平移和旋轉的順序不同，得到的結果也不同。根本原因是，旋轉時座標系會跟著旋轉。如下圖：

image

image

【ps】只要不涉及旋轉，那麼順序就無所謂，因為座標系不會變。如果涉及到旋轉，就要考慮順序問題了，為了得到自己想要的效果，可以每次都把旋轉放到最後。

【擴充套件】還可以直接在transform之後寫變換矩陣：matrix()、matrix3d()，具體見文件。

相關文章