最近在阅读外国技术文章中无意中发现了一个神奇的CSS属性motion-path，它可以让Dom元素可以按照自定义的路径移动。
又想起了很久之前参加校招面试的时候，面试官问了我一个问题“能不能不借助库实现小球在浏览器中做圆周运动？”，于是就整理了一下让小球圆周运动的方法（纯属无聊不喜勿喷）。
因为之前的题目过于简单，作为一个需求来说缺少了一些必要条件，于是，我们给它增加一些条件，让他看起来更靠谱些。
在浏览器中间600px*600px的指定区域内，不借助任何第三方插件，利用原生JavaScript或者CSS让一个半径为25px的小球围绕指定区域的中心做圆周运行，你有几种方法？
在让小球进行圆周运动之前，让我们先来实现一下题目中提到的基础样式，剧中的容器、半径25px的小球。
.container{
position:absolute;
left:50%;
top:50%;
margin:-300px00-300px;
width:600px;
height:600px;
background:lightgray;
}
.ball{
position:relative;
width:50px;
height:50px;
border-radius:50%;
background-color:coral;
}
基础样式很容易就完成了，我们再来思考一下实现圆周运动的具体方法。我们可以将解决方法分为CSS和JavaScript两大类。
CSS方法
方法1: 双Dom元素，父元素使用animation属性
<divclass="container">
<divclass="inner-container">
<divclass="ball"></div>
</div>
</div>
.inner-container{
width:600px;
height:600px;
animation:rotate8slinearinfinite;
}
.ball{
margin:0auto;
}
@keyframesrotate{
to{
transform:rotate(1turn);
}
}
上面的方法属于很容易想到的一种方法，这里我们利用了animation属性，一直循环播放定义好的keyframe动画rotate即可。
仅仅通过animation和transform属性让外层元素旋转起来，视觉效果上看起来就是小圆球在旋转。为了让效果明显，我们把外层元素的背景色弄的明显一些。
方法2: 单Dom元素，修改transform-origin
如果是单个Dom元素，我们怎么才能让小球做圆周运动呢。如下图，A点围绕O点移动一定的角度到达B点，我们不断扩大转动的角度即可实现圆周运动。
我们只需要让我们的圆围绕着某一个中心点旋转就可以了。而CSS中刚好提供了这样一个属性transform-origin，让我们能够修改DOM节点的中心点。
