如何使用矩陣變換和其他變換CSS屬性？

Question

在CSS中使用transform屬性時，其中一種可能的方法是需要6個輸入字段的matrix方法。 CSS代碼會看起來像......

#test{ 
    transform: matrix(1, 0, 0, 1, 0, 0); 
} 

也有一些其他的變化（取決於瀏覽器）...

-ms-transform: matrix(1, 0, 0, 1, 0, 0); 

-webkit-transform: matrix(1, 0, 0, 1, 0, 0); 

我知道，上面顯示的值是股票對象的值，但所有數字意味着什麼？

Answer 1

上面提到的轉換屬性屬於2D轉換 CSS屬性的類別。除了上面提到的matrix()方法，有伴隨一些其他方法變換：

translate()，rotate()，scale()和skew()

要了解matrix()方法，最好是先了解等四種類型。

TRANSFORMS：

這四種方法進行改造正是因爲他們的聲音。

翻譯：

退房翻譯例子here。

translate(e, f)需要兩個參數。第一個參數是元素的x位置，而第二個參數是y位置 - 兩者都相對於其初始位置。如果您想將一個元素向右移動50px，向下移動100px，則CSS看起來像transform: translate(50px, 100px);。積極的X是正確的，積極的Y是下來的;負數將以相反的方向移動元素。

ROTATE：

退房旋轉例如here。

rotate(c)需要一個參數，這是您希望元素具有的旋轉量。正向旋轉是順時針，負向是逆時針旋轉。順時針旋轉一個元素30度（正）看起來像transform: rotate(30deg);。請注意，這次的參數是deg和而不是px。

SCALE：

退房尺度範例here。

scale(a, d)需要兩個參數。第一個參數是在X方向上縮放的量，而第二個參數是在Y方向上縮放的量。縮放工程由乘以當前值（寬度，高度）乘以比例值。在X方向縮放元素2次，在Y方向縮放4次看起來像transform: scale(2, 4);。參數可以是任何值，包括小數，甚至是負值。負值具有圍繞相應軸翻轉元素的效果。

SKEW：

退房歪斜例如here。

skew(b, c)可能是最容易混淆的轉換。 skew(c, d)需要兩個參數。第一個參數對應於水平曲面（頂部和底部），而第二個參數對應於垂直曲面（左和右）。這兩個參數都在deg中，類似於rotate()。第一個參數的正值將圍繞其中心點逆時針旋轉垂直表面。負值將圍繞其中心點順時針旋轉垂直表面。第二個參數的正值使水平表面順時針旋轉其中心點，而負值則逆時針旋轉水平表面。每個參數的極限（以度爲單位）爲+ -90度 - 如以下示例所示。

MATRIX：

退房矩陣示例here。

matrix(a, b, c, d, e, f)可以完成前面列出的轉換所做的一切。

兩個參數a和d分別用於縮放X方向和Y方向的元素。 相同，與scale(a, d)方法的相同。

第二個和第三個參數b和c用於偏斜元素。這兩個值與相同地與skew(b, c)方法的相同。

最後，最後兩個參數e和f分別用於在X方向和Y方向上平移元素。相同地與translate(e, f)方法的相同。

可以使用matrix()改造，實現了難以置信的作用。看看this網站，向下滾動頁面（在計算機上，而不是在移動設備上）會導致頁面上的元素通過matrix()方法進行轉換。它產生了很好的效果！

最後，也有不同的瀏覽器不同的語法。據W3Schools的here他們下面

transform: 
-ms-transform: /* IE 9 */ 
-webkit-transform: /* Safari and Chrome */ 

最好的做法是推出你的網站之前對其進行測試在各種瀏覽器。

有關各種2D變換的更多信息，請this link。有關matrix()方法背後的數學，請查看this link。

Answer 2

與其花時間去包裝你的頭周圍矩陣，當你沒有數學的背景，我建議瞭解其他轉換也並知道如何將它們在同一行合併，因爲如果你試着將它們分開只是最後指令被執行。

取而代之的是

#shape { 
    transform: rotate(40deg); 
    transform: translate(100px, 30px); 
    transform: scale(0.8, 0.4); 
} 

而是執行此操作：

#shape { 
    transform: rotate(40deg) translate(100px, 30px) scale(0.8, 0.4) 
} 

這給你，你可以繞到你的頭，並擁有大的權力作爲基質你想要的結果。