自身旋转
旋转元素，首先想到的就是rotate这个属性。
.circle {
width: 30px;
height: 30px;
background: #aaa;
animation: spin 3s linear;
}
@keyframes spin{
to {
transform: rotate(1turn);
}
}
详见https://jsfiddle.net/8nt3k843/
绕圆旋转
rotate可以实现旋转，但只是绕自身旋转，是以其中心为圆心，进行旋转。如果想实现绕着一个圆进行旋转，则需要多用到一个属性了。
.container {
width: 300px;
height: 300px;
border: 1px dotted red;
border-radius: 50%;
position: relative;
box-sizing: border-box;
}
.circle {
position: absolute;
left: 50%;
top: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background: #aaa;
transform-origin: 0 150px;
animation: spin 3s infinite linear
}
如上代码，增加transform-origin这个属性，使旋转的中心刚好位于圆的中心，这样就可以实现绕圆旋转了。
详见https://jsfiddle.net/ysm0Lurg/
绕圆旋转，内容不转
乍一看，实现了绕圆的效果，但注意到我们的旋转的元素是没有内容的，如果有内容的话，又会如何呢
效果见https://jsfiddle.net/7fc06a9c/
可以看到，旋转元素里面的内容也跟着元素一起旋转起来，但这并不是我们想要的效果。
有没有什么方法可以让内容不跟着一起旋转呢？其实很简单，再嵌套一层，然后让里面的内容进行反方向旋转就好了。
.circle{
animation: spin 3s linear;
}
.content {
animation: inherit;
animation-direction: reverse;
}
代码详见https://jsfiddle.net/t1cnn6fo/
绕圆旋转，不而外嵌套
通过嵌套多了一层，让内外层往不同的方向旋转，达到内容不旋转的效果。那么，有没有可能不而外嵌套呢，方法也是有的。
那就是利用translate来实现。
@keyframes spin {
from {
transform: translate(-50%, 135px) rotate(0turn) translate(50%, -135px) rotate(1turn)
}
to {
transform: translate(-50%, 135px) rotate(1turn) translate(50%, -135px) rotate(0turn)
}
}
先利用translate，将旋转的中心与圆的中心重合，然后进行旋转，之后又利用translate，移动到原先的位置。最后再围绕自身中心，进行反方向旋转，以达到内容不旋转的效果
代码详见https://jsfiddle.net/243wbskt/
其实，最关键的一点还是在于坐标的转换，如下所示：
// 核心要点
// css
transform-origin: x y; // x, y为元素左上角相对圆心坐标的距离
transform: rotate(30deg);
// 等价于
// transform-origin: 0 0;
transform: translate(x, y); // x, y为元素左上角相对圆心坐标的距离
transform: rotate(30deg);
transform: translate(-x, -y); // x, y为元素左上角相对圆心坐标的距离
参考链接：http://www.w3cplus.com/css3/css-secrets/animation-along-a-circular-path.html
