通过改变元素的变形对称点，可以使元素绕着环形路径运动。
<div class="a">
</div>
img{
animation: run 5s infinite linear;
transform-origin: 50% 170px; // 将元素的变形对称点改变为容器的中心，使元素绕元素中心转动
}
@keyframes run {
to {
transform: rotate(1turn);
}
}
这样的缺点是使得元素自身旋转，当元素位于底部时倒过来了，如果其中有文字，也会倒过来。额外加入一层html结构进行旋转可以用来抵消这个效果。
<div class="a">
<div class="con">
</div>
</div>
.con{
animation: run 5s infinite linear;
transform-origin: 50% 170px;
}
img{
animation:inherit; // 继承容器元素的动画效果
animation-direction: reverse; 反向执行动画，达到抵消的效果
}
不增加额外的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);
}
}
