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

Question

使用CSS，我怎樣才能申請多個transform？

示例：在下文中，僅應用翻譯，而不是旋轉。

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

Answer 1

你必須把它們放在這樣一行：

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

當你有多個變換指令，只有最後一個將被應用。這就像任何其他的CSS屬性。

Answer 2

你可以申請一個以上的變換是這樣的：

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

Answer 3

例如

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

我使用enjoycss工具

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

它生成CSS代碼所需使用GUI生成轉換參數sfrom代碼;）

Answer 4

我加入這個答案不是因爲它很可能是有益的，但只是因爲它是真實的。

除了利用現有的答案，說明如何通過鏈接他們做一個以上的翻譯，也可以construct the 4x4 matrix yourself

我從some random site I found while googling抓住下面的圖片，顯示的旋轉矩陣：

左右旋轉X軸：
旋轉圍繞Y軸：
旋轉圍繞Z軸：

我找不到翻譯的一個很好的例子，所以假設我記得/理解對不對，翻譯：

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

多見於Wikipedia article on transformation以及the Pragamatic CSS3 tutorial這也解釋了它相當好。我發現了另一個指南，解釋了任意旋轉矩陣是Egon Rath's notes on matrices

矩陣乘法的作品，當然這些4X4矩陣之間，所以要進行旋轉再平移，你做適當的旋轉矩陣和平移矩陣相乘。

這會讓你有更多的自由讓它變得恰到好處，並且也讓任何人都無法理解它在做什麼，包括你在五分鐘內完成的任務。

但是，你知道，它的工作原理。

編輯：我只是意識到，我錯過了提及可能是最重要和實際的使用，這是通過JavaScript增量創建複雜的3D轉換，在那裏事情會更有意義。

Answer 5

一個簡單的方法來應用多種變換是這個

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

但也不要忘記，你需要添加前綴，讓它在所有的瀏覽器如如Safari某些瀏覽器工作，IE不支持變換分析沒有前綴的財產。

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

Answer 6

您也可以使用標記e.g一個額外層應用多種變換：

<h3 class="rotated-heading"> 
    <span class="scaled-up">Hey!</span> 
</h3> 
<style type="text/css"> 
.rotated-heading 
{ 
    transform: rotate(10deg); 
} 

.scaled-up 
{ 
    transform: scale(1.5); 
} 
</style> 

動畫與使用Javascript轉換元件時，這是非常有用的。