Page 257 - css揭秘

这乍看起来确实有些费解，但只要我们牢记变形函数并不是彼此独立
的，这个道理就会逐渐清晰起来。每个变形函数并不是只对这个元素进行变
形，而且会把整个元素的坐标系统进行变形，从而影响所有后续的变形操
作。这也说明了为什么变形函数的顺序是很重要的，变形属性中不同函数的
顺序如果被打乱，可能会产生完全不同的结果。如果你对此仍有疑惑，图
8-38 应该可以帮助你消除困扰。

图 8-38
如何用两次位移变形（translate）
来代替变形原点（transform-
origin）的作用。红色圆点表示
每次变形的原点。上图：演示了
transform-origin 的原理；下图：
以分步的方式演示了两次位移代替
transform-origin 的原理

因此，借助这个思路，我们就可以基于同一个 transform-origin 来实
现前面用到的两个旋转动画（我们会再次把动画分成两套，因为现在它们的
关键帧已经完全不一样了）：

@keyframes spin {
from {
transform: translate(50%, 150px)
rotate(0turn)
translate(-50%, -150px);
}
to {
transform: translate(50%, 150px)
rotate(1turn)
translate(-50%, -150px);
}
}
@keyframes spin-reverse {
from {
transform: translate(50%,50%)
rotate(1turn)
translate(-50%,-50%);
}
to {

226 第 8 章 过渡与动画

඀ࠡ JOEC