自身绕圆旋转
`<div class="box box2">
<div class="ball">Ball</div>
</div>`。
@keyframes spin{
to{transform: rotate(1turn);}
}
.box2 .ball{
animation:spin 3s infinite linear;
transform-origin: 50% 150px;
}
绕圆旋转,内容不转
<div class="box box3">
<div class="ball">
<div class="inner">Ball</div>
</div>
</div>
@keyframes spin{
to{transform: rotate(1turn);}
}
@keyframes spin-reverse{
from{
transform:rotate(1turn);
}
}
.box3 .ball{
animation:spin 3s infinite linear;
transform-origin: 50% 150px;
}
.box3 .inner{
animation: spin-reverse 3s infinite linear;
}
从上面可以看到两个动画只是方向相反,那么我们想起了前面提到的animate-direction,使用reverse来得到动画的反向版本。
.box3 .inner{
animation:inherit;/*继承上级的属性*/
animation-name:spin-reverse;
}
.box4 .ball{
animation:spin 3s infinite linear;
transform-origin:50% 150px;
}
.box4 .inner{
animation:inherit;
animation-direction: reverse;
}
单个元素绕圆旋转
最后作者又从transform-origin可以由两个translate()模拟出来,优化出了只使用一个HTML元素就实现了自身不转动,同时可以围绕半径运动。
@keyframes spin2{
from{
transform: translate(50%, 150px)
rotate(0turn)
translate(-50%, -150px)
translate(50%,50%)
rotate(1turn)
translate(-50%,-50%)
}
to{
transform: translate(50%, 150px)
rotate(1turn)
translate(-50%, -150px)
translate(50%,50%)
rotate(0turn)
translate(-50%,-50%)
}
}
.box5 .ball{
animation: spin2 3s infinite linear;
}
演示:demo3 其实,最关键的一点还是在于坐标的转换,如下所示:
transform: rotate(30deg);
transform-origin: x y; // x, y为元素左上角相对圆心坐标的距离
// 等价于
transform: translate(x, y)
rotate(30deg)
translate(-x, -y);
transform-origin:0 0;