第四十章、沿环形路径平移的动画

通过改变元素的变形对称点，可以使元素绕着环形路径运动。

<div class="a">
    ![](1.png)
</div>

img{
	animation: run 5s infinite linear;
	transform-origin: 50% 170px;  // 将元素的变形对称点改变为容器的中心，使元素绕元素中心转动
}
@keyframes run {
    to {
      transform: rotate(1turn);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

这样的缺点是使得元素自身旋转，当元素位于底部时倒过来了，如果其中有文字，也会倒过来。额外加入一层html结构进行旋转可以用来抵消这个效果。

<div class="a">
	<div class="con">
		![](2.png)
	</div>
</div>

.con{
	animation: run 5s infinite linear;
	transform-origin: 50% 170px;
}
img{
	animation:inherit; // 继承容器元素的动画效果
	animation-direction: reverse; 反向执行动画，达到抵消的效果
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

不增加额外的html结构也能实现这一效果，事实上所有的transform-origin都可以用translate()模仿出来。变形函数并不是独立的，它会把整个元素的坐标系统也进行位移变形，即将元素的对称点位移变形。从而影响后续的变形操作，所以多次变形操作的顺序不同，导致的结果也会不一样。

img{
    animation: run 5s infinite linear;
}

@keyframes run {
    from {
      transform: translateY(170px) translateY(-50%)
                  rotate(0turn)
                  translateY(-170px) translateY(50%)
                  rotate(1turn);
    }
    to {
      transform: translateY(170px) translateY(-50%)
                  rotate(1turn)
                  translateY(-170px) translateY(50%)
                  rotate(0turn);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 第四十章、沿环形路径平移的动画

第四十章、沿环形路径平移的动画