#transformedObject {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 200px;
 height: 80px;
}

#transformedObject {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 200px;
 height: 80px;
 transform: matrix(0.9, -0.05, -0.375, 1.375, 220, 20);
 transform-origin: 0 0;
}

#o1 {
 transform-origin: 0px 0px;
 transform: rotate(15deg) translateX(230px) scaleX(1.5);
}

SS 在您可以修改的內容方面非常強大，并且該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 開發(fā)中，正 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 變量的幫助下，這個問題是微不足道的。