CSS3補間和矩陣

Question

我把CSS中的一些關鍵幀動畫組合在一起，從屏幕的一側爲另一側創建一個div動畫，沿着這個方向稍微旋轉。我發現關鍵幀方法受到限制，因爲我希望能夠有很多變化進入一個大序列。作爲一個例子，這些變化可能不僅僅是從左到右，從右到左，還有從上到下，等等。爲了增加問題的複雜性，我需要能夠對這個序列進行洗牌並保持每個動畫之間的連續性。

序列本身應該能夠以任何順序運行並重置。

例如，如果我想移動DIV在100px的階段：

left (100px), up (100px), left (100px) and then down(100px) 

下一次

如下我可能要序列（再次100像素）：

left, down, right, up 

我的想法是，這可以通過使用JavaScript來動態編寫動畫來實現，可能使用類似CSS3矩陣的東西。到目前爲止，我已經弄清楚了左右等簡單的東西，但我無法弄清楚如何添加旋轉。這似乎是一個很好的起點：

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

也一直在採取看看這個：

http://tweenjs.com/

我的想法是，一個）我是高估通過採用CSS矩陣方法使這變得複雜？有更簡單的東西嗎？和b）如何使用CSS矩陣或其他方法同時實現旋轉和移動？

任何幫助表示讚賞！

Answer 1

如果你想做動態動畫，那麼你應該使用JavaScript來動畫。

至於如何平移與旋轉相結合，得到的答案是正確的，在該useragentman後（這亦是一個很好的介紹CSS矩陣。）

以旋轉角度（弧度），其你想要達到並創建以下矩陣：

Cos(angle), -Sin(angle), 0 
Sin(angle), Cos(angle), 0 
0,   0,  1 

然後創建您的（大概2D）移動在X和Y以下矩陣。

0,0,X 
0,0,Y 
0,0,1 

然後把它們放在一起（或採用矩陣術語中的點積）。這裏有一個方便的matrix multiplier給你，關於如何創建點積的細節也在同一篇文章中。

請注意，這些是變換（不是位置變化），變換不會影響頁面位置。