如何在 CSS 中應用多重變換？

Question

使用CSS，如何應用多個transform？

範例：以下僅套用平移，不套用旋轉。

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);
}

Answer 1

我添加這個答案不是因為它可能有幫助，而是因為它是真實的。

除了使用現有答案解釋如何透過連結進行多個翻譯之外，您還可以 自己建立 4x4 矩陣

我從我在谷歌搜尋時發現的一些隨機網站顯示了旋轉矩陣：

繞 x 軸旋轉：
繞 y 軸旋轉：
繞 z 軸旋轉：

我找不到很好的翻譯範例，所以假設我記得/理解正確，翻譯：

[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]

請參閱有關轉換的維基百科文章以及Pragamatic CSS3 教學 很好地解釋了這一點。我發現的另一個解釋任意旋轉矩陣的指南是 Egon Rath 關於矩陣的筆記

當然，這些 4x4 矩陣之間可以進行矩陣乘法，因此要執行旋轉和平移，您需要建立適當的旋轉矩陣並將其乘以平移矩陣。

這可以給你更多的自由來讓它恰到好處，也使得任何人幾乎完全不可能理解它在做什麼，包括五分鐘內的你。

但是，你知道，它確實有效。

編輯：我剛剛意識到我錯過了可能最重要和最實際的用途，即透過 JavaScript 逐步創建複雜的 3D 轉換，這樣事情會變得更有意義。

Answer 2

你必須將它們放在一行上，如下所示：

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

當您有多個轉換指令時，僅套用最後一個。就像任何其他 CSS 規則一樣。

---

請記住，多個轉換一行指令是從右向左套用。

這個：變換：scale(1,1.5)rotate(90deg);
和：變換：旋轉(90deg)縮放(1,1.5);

#

將不會產生相同的結果：

.orderOne, .orderTwo {
  font-family: sans-serif;
  font-size: 22px;
  color: #000;
  display: inline-block;
}

.orderOne {
  transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
  transform: rotate(90deg) scale(1, 1.5);
}

<div class="orderOne">
  A
</div>

<div class="orderTwo">
  A
</div>