CSS 在您可以修改的内容方面非常強大，并且該transform屬性是最通用和最強大的 CSS 屬性之一。在本文中，我将介紹使用transform屬性修改 CSS 元素的所有方法。
什麼是變換屬性？
CSS 中的transform屬性隻是一種您可以在一個屬性中旋轉、縮放、移動等元素的方式。由于這種靈活性，如果起初使用起來可能會令人困惑，但本文将消除所有這些困惑。
.class {
transform: rotate(90deg) scale(2) translate(100px, 200px);
}
transform通過組合多個變換函數來獲得所需的輸出，是以為了了解transform您需要了解每個transform函數。
rotate
可能最容易了解的變換函數是rotate. 此函數采用單個參數，即旋轉元素的角度。正值将導緻順時針旋轉，負值将導緻逆時針旋轉。
.red {
transform: rotate(10deg);
}
.green {
transform: rotate(-45deg);
}
.blue {
transform: rotate(.25turn);
}
正如您在上面的示例中看到的，我們使用deg和turn機關來定義我們的旋轉。deg機關從 0 到 360，而turn機關從 0 到 1。
3D 旋轉
rotateX您還可以使用、rotateY和rotateZ函數進行 3D 旋轉。該rotateZ功能的工作原理與rotate.
rotateX将在水準軸上rotateY旋轉一個元素，并将在垂直軸上旋轉一個元素。這些可用于翻轉元素。
.red {
transform: rotateX(60deg);
}
.green {
transform: rotateY(60deg);
}
.blue {
transform: rotateX(.2turn) rotateY(.2turn);
}
如您所見，我們在 3D 空間中旋轉元素，使其看起來被擠壓。這種旋轉實際上隻在處理 3D 元素時才有用。
scale
scale是另一個很容易了解的函數。它可以采用一個或兩個參數來确定元素大小的縮放比例。大于 1 的數字會使元素變大，而小于 1 的數字會縮小元素。
.red {
transform: scale(1.25);
}
.green {
transform: scale(.5);
}
.blue {
transform: scale(1.25, .75);
}
當一個參數被傳遞給scale它時，它會根據傳遞的數字縮放 X 和 Y 軸相同的量。當兩個值傳遞給scale第一個數字時，将縮放 X 軸，第二個數字将縮放 Y 軸。
此外，如果您願意，可以使用scaleXandscaleY函數來縮放 X 或 Y 軸。這些函數采用一個參數并在相應軸上縮放元素。
3D 比例
就像rotate您可以在 3D 中縮放一樣。為此，您将使用與 and 類似的函數scaleZ，但用于 Z 軸。這同樣隻對 3D 元素有用。scaleX``scaleY
translate
可能我最喜歡的轉換元素的方法是使用translate函數。這個函數像scale函數一樣接受一個或兩個參數，并将根據提供的值移動一個元素。
.red {
transform: translate(25px);
}
.green {
transform: translate(-25px, 25px);
}
.blue {
transform: translate(0, -25px);
}
透明的彩色箭頭表示形狀通常放置的位置，而不透明的箭頭表示它們在平移後的位置。
你會注意到，當隻有一個值被傳遞給它時，translate它隻會影響 X 軸，是以元素向右移動 25 個像素，因為它是一個正值。
當将兩個值傳遞給translate第一個值時，會在 X 軸上移動元素，而第二個值會影響 Y 軸的位置。這意味着綠色箭頭向左移動 25 個像素，向下移動 25 個像素。正 Y 值将元素向下移動似乎令人困惑，因為我們通常認為正 Y 意味着向上，但在 Web 開發中，正 Y 值意味着元素在頁面中向下移動。
最後，藍色箭頭向上移動了 25 個像素，因為第一個參數設定為 0，第二個參數設定為負 25 個像素。
就像 scale 一樣，有一個translateX和translateY函數可以一次隻在一個方向上移動一個元素。
百分比translate
該translate屬性處理百分比的方式與幾乎所有其他 CSS 屬性不同，因為它基于元素的大小而不是其父級的大小。
.red {
transform: translate(100%);
}
正如你所看到的，當我們用百分比平移時，我們将元素向右移動了其自身寬度的 100%。這對于通過将元素移動其自身寬度的 50% 或将元素彼此偏移其大小的百分比來使元素居中非常有用。
3D translate
您現在可能已經猜到了，但translate也可以在 3D 中使用。您可以使用translateZ僅修改 Z 軸的函數或translate3D類似 的函數translate，但接受第三個參數來在 Z 軸上移動元素。同樣，這僅對 3D 元素有用。
偏斜
可能所有transform功能中最沒用的是skew. 它允許您通過傾斜形狀的邊緣來拉伸形狀。該skew函數接受一兩個參數，就像translate.
.red {
transform: skew(25deg);
}
.green {
transform: skew(15deg, 25deg);
}
.blue {
transform: skew(-15deg, -25deg);
}
如您所見，skew 屬性在 X 和 Y 方向上拉伸了我們的形狀。通過指定一個參數，我們隻在 X 方向上傾斜，而如果我們傳遞兩個屬性，第一個在 X 方向上傾斜，第二個在 Y 方向上傾斜。
此外，就像translate您可以使用skewX和skewY在一個方向上傾斜元素而不影響其他方向一樣。
3D 傾斜
不同的是，所有其他transform屬性skew都沒有任何 3D 版本。
組合變換
到目前為止，我們已經讨論了單獨使用轉換，但是如果您想使用多個轉換怎麼辦？這實際上非常簡單，因為您可以傳遞任意數量的函數transform。
.red {
transform: rotate(25deg) scale(.5) translateX(50px);
}
.green {
transform: rotate(-.5turn) translateX(-10%);
}
.blue {
transform: scaleX(1.2) scaleY(.8);
}
組合轉換變得困難的唯一時候是當您想要在不同的類中修改它們時。
.base-class {
transform: scale(1.2) translateX(5px);
}
.big {
transform: scale(2) translateX(5px);
}
.move {
transform: scale(1.2) translateX(100px);
}
.big.move {
transform: scale(2) translateX(100px);
}
由于transform是一個屬性，您需要在修改的每個類之間複制所有值，transform因為如果您隻是transform: scale(2)在.big類中寫入，它将覆寫整個transform而不隻是scale部分。幸運的是，我們可以巧妙地使用 CSS 變量來解決這個問題。
.base-class {
transform: scale(var(--scale, 1.2)) translateX(var(--translate-x, 5px));
}
.big {
--scale: 2;
}
.move {
--translate-x: 100px;
}
如您所見，我們現在隻更改 CSS 變量，而從未修改實際transform屬性。
結論
總體而言，CSStransform非常有用，同時也非常易于了解。到目前為止，最難的部分transform是了解如何跨不同類組合多個變換，但在 CSS 變量的幫助下，這個問題是微不足道的。