Question

我在CSS中放置了一些关键帧动画，它们将屏幕一侧的div设置为另一侧的动画，沿途稍微旋转。我发现关键帧方法是限制性的，因为我希望能够有很多变化进入一个大的序列。作为示例，变化可以不仅从左到右，从右到左，而且从上到下等等。为了增加问题的复杂性，我需要能够改变这个序列并保持每个动画之间的连续性。

序列本身应该能够以任何顺序运行并重置。

例如，如果我想以100px阶段移动div：

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

下次我可能希望序列如下（再次100px）：

left, down, right, up

我的想法是，通过使用JavaScript动态编写动画或者使用类似CSS3 Matrix的东西，可以更好地实现这一点。到目前为止，我已经找到了左右这些简单的东西，但我无法弄清楚如何添加旋转。这似乎是一个非常好的起点：

也看了看这个：

我的想法是，a）通过采用CSS Matrix方法，我是否过于复杂？有什么比这更简单的了吗？和b）如何使用CSS Matrix或任何其他方法同时实现旋转和移动？

任何帮助表示赞赏！

Answer 1

如果你想做动态动画，那么你应该使用JavaScript进行动画制作。

至于如何将翻译与轮换相结合，答案就在useragentman帖子中（顺便说一下，这是对css矩阵的一个非常好的介绍。）

获取您想要实现的旋转角度（以弧度表示）并创建以下矩阵：

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

然后为x和y中的（可能是2D）运动创建以下矩阵。

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

然后将它们相乘（或采用矩阵术语中的点积）。这里有一个方便的matrix multiplier，有关如何创建点积的详细信息也在同一篇文章中。

请注意，这些是转换（不是位置更改），转换不会影响效果页面位置。