Page 256 - css揭秘

}

.avatar {
animation: spin 3s infinite linear;
transform-origin: 50% 150px; /* 150px = 路径的半径 */
}

.avatar > img {
animation: inherit;
animation-direction: reverse;
}

这样就差不多了！这个方案可能还算不上完美，毕竟需要加一层额外
的元素，但是，我们只用了不到 10 行 CSS 代码就实现了一个非常复杂的动
画，已经相当不容易了！

试一试 play.csssecrets.io/circular-2elements

单个元素的解决方案

上面的技巧很有效，但还不够理想，因为它需要修改 HTML 结构。当
我最开始想出这个技巧时，就立即写了一封邮件发给 CSS 工作组的邮件列
1①
表 （那时候我还不是其中一员），建议规范允许开发者为同一个元素指定多
个变形原点。这样的话，只需要一个元素就可以实现本节所讨论的动画效果
了，因此这看起来是一个非常合理的功能需求。

这次讨论相当热烈，把讨论推向高潮的正是 CSS 变形规范当时的一位
编辑 Aryeh Gregor 所说的那句让人一时摸不着头脑的话：

“transform-origin 只是一个语法糖而已。实际上你总是可以用
translate() 来代替它。”

——Aryeh Gregor

他 确 实 一 语 道 破 天 机： 每 个 transform-origin 都 是 可 以 被 两 个
translate() 模拟出来的。比如，下面两段代码实际上是等效的：

transform: rotate(30deg);
transform-origin: 200px 300px;

transform: translate(200px, 300px)
rotate(30deg)
translate(-200px, -300px);
transform-origin: 0 0;

① 你可以在 lists.w3.org/Archives/Public/www-style/2012Feb/0201.html 读到完整的讨论。

47 沿环形路径平移的动画 225

඀ࠡ JOEC