前几天遇到一个需求，要求做一个圆周运动的动画 emmmm....
让一个物体画圆，第一时间想到的就是 rotate，想到就干，上示例：
<!-- Dom结构 -->
<div class="canvas">
<div class="move"><div></div></div>
</div>
/** 装饰代码 **/
.canvas{ width: 800px; height: 800px; margin: 50px auto; background-color: #F1F2F3; padding: 1px;}
.move{ width: 200px; height: 200px; margin: 100px auto; border: 1px solid #ddd; position: relative; box-sizing: border-box;}
.move:before{ content:''; display: block; width: 100%; height: 100%; border: 1px solid #ddd;
border-radius: 50%; position: absolute; top: 0; left: 0;}
.move div{ width: 50px; height: 50px; border-radius: 50%; box-shadow: #f04806 0px 0px 20px inset;}
/** 核心代码 1.0 **/
@keyframes whirl{
100%{ transform: rotate(1turn);}
}
.move div{transform-origin: 100px 100px; animation: whirl 4s linear infinite;}
嗯，还不错，挺流畅的也挺圆润，但是，就有点太普通了，要不，给他来点立体的？
那得拿出我们的大宝贝 preserve-3d 了！来，走起：
/** 新增样式 (在之前的基础上新增) **/
.canvas{ transform-style: preserve-3d; transform: perspective(500px);}
.move{ transform: rotateX(45deg) translateY(240px);}
有点立体的那种忽大忽小的感觉了，但是还是有点不完美，因为那个小圆圈没办法立起来
因为我们改变了元素的基点位置，导致进行3D变换的时候达不到我们想要的效果 (3D变换是根据元素基点位置来进行变换的)
那怎么办呢？有人会说，“既然改变了元素的基点，那就再内嵌一个元素，外面那个转圈，里面的立起来。”
嗯，听起来挺不错的，但是一想，还要进行元素嵌套，就感觉很low，不够完美，这怎么能行呢，这不符合我的风格，精益求精的那种。
那就只能分析分析，既然元素立起来，要用到3D变换，那元素的圆周运动就要不涉及3D变换才行，emmmm...
......
Two thousand years later.
......
在一番努力查阅资料之后，发现了另一种圆周运动的方法，话不多说，先上代码：
<div class="canvas">
<div class="content"><div class="dot">Hello</div></div>
</div>
.canvas{ width: 800px; height: 800px; margin: 50px auto; background-color: #F1F2F3; padding: 1px;}
.content{ width: 300px; height: 300px; margin: 40px auto; border: 4px solid #DDD; border-radius: 50%; position: relative;}
.dot{ width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 12px; color: #440fd3; border-radius: 50%;
box-shadow: #440fd3 0 0 16px inset;}
/** 核心 2.0 **/
.canvas{ transform-style: preserve-3d; transform: perspective(500px);}
.content{ transform: rotateX(45deg) translateY(200px); transform-style: preserve-3d;}
.dot{ position: absolute; left:-22px; top:-22px; animation: moveX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate,
moveY 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate; transform: rotateX(-45deg);}
@keyframes moveX{ 0%{ left: -22px;} 100%{ left: 282px;}}
@keyframes moveY{ 0% {top: -22px;} 100% {top: 282px;}}
怎么样，是不是很神奇，不依赖3D变化，也一样可以做圆周运动，接下来就简单分析一下原理
首先是把圆周运动，拆分成两个半圆，再利用动画的 重复性 和 可逆向执行 的机制来达成一个完整的圆。
我们可以再进行拆分，分成X轴的运动和Y轴的运动，这样单独来看，就能变成线性运动：
X：运动了两个圆半径的距离，其中方向无变化，一直增加
Y：运动了两个圆半径的距离，其中方向有变化，先增后减因其Y轴运动特点，所以两轴动画不能同时进行，其中一轴须慢半拍（即完整动画周期时间为4s，延迟时间要为其一半2s，才能做到圆弧运动，要不然就是对角线的线性运动了）
[如有解释不当的地方，欢迎指出！]
拓展
椭圆运动
原理就是在圆周运动的基础上给父元素添加一个y轴上的上下运动
/** 在核心代码 1.0 版本上新增 **/
.move{ animation: whirlY 1s infinite alternate ease-in-out;}
@keyframes whirlY{ 0%{ transform: translateY(50px);}}
钟摆运动
这个比较简单，就是把元素的基点移动到顶部中心，就是设置 transform-origin:top center;
/** 自己写样式代码，再加上以下的关键代码 **/
div{ transform-origin: top center; transform:rotate(45deg); animation: swing .5s infinite alternate ease-in-out;}
@keyframes swing{ 100%{ transform:rotate(-45deg);}}
