HTML那个函数用于实现平移,巧妙使用 transform 实现环形路径平移动画

原标题：巧妙使用 transform 实现环形路径平移动画

最近在《CSS Secrets》一书看到了这样一节：让一个元素沿环形路径平移。这是一个 css 动画的问题，但却没有看上去那么简单，其关键点是元素是平移的，也就是说，元素自身并不发生旋转，只是稳定地沿着一个环形的路径移动，像这样：

在书中作者 Lea Verou 已经给出了解答(实际上，可以追溯到作者更早的这篇文章)，不过，我认为再补充一点周边细节知识可能会更易于理解。因此，本文整理了一些东西，将尝试更详细地解答这个问题。

从旋转动画开始

最开始看到这个问题的时候，会很容易想到用transform-origin定义圆心的位置，然后用rotate()进行旋转。css 代码大概是这样(半径为 150px)：

@keyframesspin{

to{

transform:rotate(1turn);

}

}

.avatar{

animation:spin 10sinfinite linear;

transform-origin:50%150px;

}

搭配的 html 很简单：

对应的效果是：

可以看到，这是一个旋转动画，元素在沿着环形路径移动的同时，自身也会围绕圆心发生旋转。因此，这并不是我们想要的平移效果。

但另一方面，元素沿环形路径移动这一点是符合我们的目标的。所以，可以在这个基础上思考如何改进。

利用多元素的变形相消

w3c 的 The Transform Function Lists 里提到：

If a list of \ is provided, then the net effect is as if each transform function had been specified separately in the order provided.

意思是，当一个元素的transform添加了多个变换函数时，其效果等同于按照这些变换函数的顺序依次分散添加在多层元素中。例如，以下元素：