• 一、CSS transform 屬性的介紹
• 二、transform 函式
  • translate ——平移
  • rotate ——旋轉
  • scale ——縮放
  • skew ——傾斜
• 三、使用 transform 製作一個動態 LOGO
  • 效果圖
  • 實現過程
• 四、使用 transform 的注意事項
  • 不要忘記原 transform 函式
  • rotate 與 translate 的同時使用
  • 疊加生效而非覆蓋
• 參考

一、CSS transform 屬性的介紹

通過修改CSS視覺格式化模型的座標空間，CSS 的 transform 屬性允許使用者平移，旋轉，縮放或傾斜給定元素。
transform 屬性可以指定為關鍵字值 none 或一至多個<transform-function>（transform 函式）值。

舉例

transform: none

transform 屬性指定為一至多個<transform-function>（transform 函式）值：

/* transform: <transform-function> */
transform: scale(0.6) translate(-.9em, .2em) rotateX(360deg);

二、transform 函式

在 CSS3 中，transform 函式包括：translate、rotate、scale、skew 與 matrix。

translate ——平移

平移分為 translateX()、translateY()、translateZ()，表示在X、Y、Z軸上移動，也有2D移動的 translate(,) 可以同時指定在 X 與 Y 軸上的移動量，以及3D移動的 translate3d(,,) 可以同時指定在三條軸上的移動量。
移動量一般用長度來指定，如 10px 。也可以通過百分比來指定，其參考值是 transform 作用元素的尺寸。

transform: translate(20px, 30px)

translate 可以用於絕對定位下的元素居中。示例如下：

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 
      此時元素左上角居中，故要將元素向左平移寬度的一半、向上平移高度的一半，才能使元素的中心居中；
      由於座標系中，原點右側為 X 軸正軸，原點下方為 Y 軸正軸，故此處取負值
    */
    transform: translate(-50%, -50%);
}
 

rotate ——旋轉

rotate()為 2D 旋轉，其引數值為角度，如 45deg ，預設為順時針旋轉，若角度取負數則反向旋轉。
3D 旋轉分為按 X、Y、Z 軸旋轉，對應的函式即 rotateX()、rotateY()與rotateZ()。

transform: rotateX(45deg)

scale ——縮放

scale的引數值 n 為縮放的比例，n 為正數表示放大 n 被，n 為負數表示縮小至 |n| 倍，基數為 1 。
scale()定義 2D 縮放，scale3d(x,y,z)定義 3D 縮放。scaleX()、scaleY()、scaleZ()分別表示單獨在 X、Y、Z 軸上縮放當前元素。

transform: scale(2.0)

skew ——傾斜

skew(,)為 2D 旋轉，其引數值為角度，如 30deg 。
3D 旋轉分為按 X、Y 軸旋轉，對應的函式即skewX()與skewY()。

transform: skewX(-30deg)

三、使用 transform 製作一個動態 LOGO

效果圖

實現過程

外部wrapper（站牌的邊框）居中顯示。

.wrapper {
    background-color: rgb(155, 27, 27);
    background-clip: content-box;
    border: 30px double white;
    cursor: pointer;
    padding: 1%;
    /* 使用flex佈局，操縱其子元素居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 該元素居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

wrapper（站牌）內有 5 個 strong 標籤，從左到右依次包裝了 9 3 / 4 Station 這個五個單詞。

.wrapper strong {
    /* strong為行級元素，需要更改為塊級元素，否則無動畫效果 */
    display: inline-block;
    margin: .2em;
    font-size: 3em;
    color: whitesmoke;
    /* 因為後續要對這 5 個 strong 標籤（即站牌上的文字）進行 transform，故此處新增 transition ，即過渡時間，讓元素轉變形態的過程能展現出來 */
    transition: 1s;
}

當滑鼠移過外層 wrapper（站牌）時，這 5 個單詞將發生變化。

.wrapper:hover strong:nth-of-type(1) {
    /* 9 放大至 1.4 倍，並向右移動，靠近 3 / 4 */
    transform: scale(1.4) translateX(.6em);
}
.wrapper:hover strong:nth-of-type(2) {
    /* 3 縮小並向右上方移動，移動至 / 之上，成為分子 */
    transform: scale(0.6) translate(.9em, -.6em);
}
.wrapper:hover strong:nth-of-type(3) {
    /* / 縮小並在 Y 軸上適當移動 */
    transform: scale(0.8) translateY(-.2em);
}
.wrapper:hover strong:nth-of-type(4) {
    /* 4 縮小並向左下方移動，移動至 / 之下，成為分母 */
    transform: scale(0.6) translate(-.9em, .2em);
}
.wrapper:hover strong:nth-of-type(5) {
    /* Station 繞 X 軸轉動一圈 */
    transform: rotateX(360deg);
}

四、使用 transform 的注意事項

不要忘記原 transform 函式

Q：為某元素 hover 樣式中新增 transform 效果後，原效果消失
A：在為元素的 hover 樣式新增 transform 效果時，不要忘記把原效果加上
例如：

.wrapper {
    transform: translate(-50%, -50%)
}
.wrapper:hover {
    transform: translate(-50%, -50%) scaleX(2)
}

rotate 與 translate 的同時使用

Q：同時使用 rotate 與 translate 後，發現平移的效果與預期不同
A：rotate 在旋轉元素時，會將座標系一起旋轉。以旋轉 90 度為例，旋轉後的 x 軸從原先的水平方向旋轉為垂直方向。
例如：現有三個元素，施加 transform 之前疊加在一起。

.before {
    color: black;
}
.after1 {
    color: darkmagenta;
}
.after2 {
    color: gold;
}

現對三者各新增 transform 函式如下：

/* 元素 color 為黑色 */
.wrapper:hover .before {
    transform: rotate(90deg);
    z-index: -1;
}
/* 元素 color 為深紫紅 */
.wrapper:hover .after1 {
    transform: translateX(100px) rotate(90deg);
}
/* 元素 color 為金色 */
.wrapper:hover .after2 {
    transform: rotate(90deg) translateX(100px);
}

以只旋轉未平移的黑色元素作為參考點，可以觀察到，深紫紅的元素先平移後旋轉，則相比黑色元素確實向左平移了 100px。這說明平移時元素的 x 軸依然是水平方向的。而金色元素雖同樣使用了 translateX(100px) 函式，卻是在垂直方向與參照點黑色相距 100px，水平上處於同一位置。由此可見，由於金色元素的平移發生在旋轉之後，座標系也發生了旋轉，x 軸正軸從原先的水平向右，旋轉了 90 度，變為了垂直向下。故金色元素最終垂直向下偏移了 100px 。
所以，在同時使用 rotate 與 translate 時，應該將 rotate 置於之後，以免產生預期之外的結果。

疊加生效而非覆蓋

應注意，上述提到的 translate、rotate、scale 等本質為函式。在同一個 transform 屬性中同時使用多個相同函式時，會發生疊加效果，而不是後面的覆蓋前面的。
例如：

{ transform: translateX(100px) translateX(-100px); }

則作用的元素最終不會發生任何偏移，因為先向 x 正方向平移了 100px ，又朝負方向平移了 100px ，則最終仍回到原位置。

參考