2012-11-19 88 views
3

我的100像素寬度100px的高度與以下矩陣一個div:CSS3變換矩陣爲全變換轉換

transform: matrix(1, 0.5, 1, -0.45, 0, 0); 

,給了我這樣的:

The transformed div with matrxi

如何將轉換矩陣CSS規則轉換爲完整轉換CSS規則?

例如:

transform: scale(0.1) rotate(0.5) skew(0.3); 
+0

編輯我的問題,現在的問題是清楚的。 – onlineracoon

+0

「完全變換CSS規則」是什麼意思? – JcFx

+0

transform:scale(0.1)rotate(0.5)skew(0.3); – onlineracoon

回答

6

你將需要在基質中,以計算從所述值中的每個部分。我發現的仿射變換的最佳介紹就是這個(儘管它是針對ActionScript的,數學是相同的);

http://www.senocular.com/flash/tutorials/transformmatrix/

或者這一塊,專門爲CSS:

http://dev.opera.com/articles/view/understanding-the-css-transforms-matrix/

+0

生病謝謝你的鏈接! – onlineracoon

+3

嘿onlineracoon,分享你最終的數學/代碼拆分這些分開? – Hoatzin