如何在CSS中應用多個轉換？

本文翻譯自：How to apply multiple transforms in CSS?

Using CSS, how can I apply more than one transform ? 使用CSS，如何應用多個transform ？

Example: In the following, only the translation is applied, not the rotation. 示例：在下面，僅應用平移，而不應用旋轉。

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

---

#1樓

參考：https://stackoom.com/question/jAfD/如何在CSS中應用多個轉換

---

#2樓

You have to put them on one line like this: 您必須將它們放在這樣的一行上：

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

When you have multiple transform directives, only the last one will be applied. 當您有多個轉換指令時，將僅應用最後一個。 It's like any other CSS rule. 就像其他任何CSS規則一樣。

---

Keep in mind multiple transform one line directives are applied from right to left . 請記住，從右到左應用了多行轉換指令。

This: transform: scale(1,1.5) rotate(90deg); 這： transform: scale(1,1.5) rotate(90deg);
and: transform: rotate(90deg) scale(1,1.5); 和： transform: rotate(90deg) scale(1,1.5);

will not produce the same result: 不會產生相同的結果：

 .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> 

---

#3樓

You can apply more than one transform like this: 您可以像這樣應用多個轉換：

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

---

#4樓

For example 例如

-webkit-transform: rotateX(-36.09deg) rotateY(-52.71deg) scaleX(1.3) scaleY(1.3) translateY(31px) ;
transform: rotateX(-36.09deg) rotateY(-52.71deg) scaleX(1.3) scaleY(1.3) translateY(31px) ;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;

I am using enjoycss tool 我正在使用Enjoycss工具

http://enjoycss.com/5C#transform http://enjoycss.com/5C#transform

it generates css code for required parameters of transform using GUI to generate the transfrom code ;) 它使用GUI生成用於轉換所需參數的CSS代碼以生成transfrom代碼;）

---

#5樓

I'm adding this answer not because it's likely to be helpful but just because it's true. 我添加此答案不是因爲它可能會有所幫助，而是因爲它是對的。

In addition to using the existing answers explaining how to make more than one translation by chaining them, you can also construct the 4x4 matrix yourself 除了使用現有的答案來解釋如何通過鏈接來進行多個翻譯之外，您還可以自己構建4x4矩陣

I grabbed the following image from some random site I found while googling which shows rotational matrices: 我從谷歌搜索時發現的一些隨機位置抓取了以下圖像，該圖像顯示了旋轉矩陣：

Rotation around x axis: 繞x軸旋轉：
Rotation around y axis: 繞y軸旋轉：
Rotation around z axis: 繞z軸旋轉：

I couldn't find a good example of translation, so assuming I remember/understand it right, translation: 我找不到很好的翻譯示例，所以假設我沒記錯/沒錯，翻譯：

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

See more at the Wikipedia article on transformation as well as the Pragamatic CSS3 tutorial which explains it rather well. 可以在Wikipedia上有關轉換的文章以及Pragamatic CSS3教程中找到更多信息，該文章對此進行了很好的解釋。 Another guide I found which explains arbitrary rotation matrices is Egon Rath's notes on matrices 我發現的另一本解釋任意旋轉矩陣的指南是Egon Rath關於矩陣的註釋

Matrix multiplication works between these 4x4 matrices of course, so to perform a rotation followed by a translation, you make the appropriate rotation matrix and multiply it by the translation matrix. 當然，矩陣乘法在這4x4矩陣之間起作用，因此要執行旋轉後再進行平移，您需要製作適當的旋轉矩陣並將其乘以平移矩陣。

This can give you a bit more freedom to get it just right, and will also make it pretty much completely impossible for anyone to understand what it's doing, including you in five minutes. 這可以讓您有更多的自由來使它正確無誤，也將使任何人（包括您）在五分鐘之內幾乎完全不可能瞭解它的工作。

But, you know, it works. 但是，您知道，它有效。

Edit: I just realized that I missed mentioning probably the most important and practical use of this, which is to incrementally create complex 3D transformations via JavaScript, where things will make a bit more sense. 編輯：我剛剛意識到，我錯過了提及它的最重要和最實際的用法，即通過JavaScript增量創建複雜的3D轉換，這會使事情變得更有意義。

---

#6樓

A simple way to apply multiple transform is this 應用多重變換的一種簡單方法是

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

But also don't forget that you need to add prefix to let it work in all browsers as some browers like safari, IE not support tranform property without prefix. 但也不要忘記，您需要添加前綴以使其在所有瀏覽器中都能正常工作，因爲某些瀏覽器（例如safari），IE不支持無前綴的tranform屬性。

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