自身旋轉(zhuǎn)

旋轉(zhuǎn)元素，首先想到的就是rotate這個(gè)屬性。

.circle {
    width: 30px;
    height: 30px;
    background: #aaa;
    animation: spin 3s linear;
}
@keyframes spin{
    to {
        transform: rotate(1turn);
    }
}

詳見https://jsfiddle.net/8nt3k843/

繞圓旋轉(zhuǎn)

rotate可以實(shí)現(xiàn)旋轉(zhuǎn)，但只是繞自身旋轉(zhuǎn)，是以其中心為圓心，進(jìn)行旋轉(zhuǎn)。如果想實(shí)現(xiàn)繞著一個(gè)圓進(jìn)行旋轉(zhuǎn)，則需要多用到一個(gè)屬性了。

.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這個(gè)屬性，使旋轉(zhuǎn)的中心剛好位于圓的中心，這樣就可以實(shí)現(xiàn)繞圓旋轉(zhuǎn)了。

詳見https://jsfiddle.net/ysm0Lurg/

繞圓旋轉(zhuǎn)，內(nèi)容不轉(zhuǎn)

乍一看，實(shí)現(xiàn)了繞圓的效果，但注意到我們的旋轉(zhuǎn)的元素是沒有內(nèi)容的，如果有內(nèi)容的話，又會(huì)如何呢

效果見https://jsfiddle.net/7fc06a9c/

可以看到，旋轉(zhuǎn)元素里面的內(nèi)容也跟著元素一起旋轉(zhuǎn)起來，但這并不是我們想要的效果。

有沒有什么方法可以讓內(nèi)容不跟著一起旋轉(zhuǎn)呢？其實(shí)很簡(jiǎn)單，再嵌套一層，然后讓里面的內(nèi)容進(jìn)行反方向旋轉(zhuǎn)就好了。

.circle{
    animation: spin 3s linear;
}
.content {
    animation: inherit;
    animation-direction: reverse;
}

代碼詳見https://jsfiddle.net/t1cnn6fo/

繞圓旋轉(zhuǎn)，不而外嵌套

通過嵌套多了一層，讓內(nèi)外層往不同的方向旋轉(zhuǎn)，達(dá)到內(nèi)容不旋轉(zhuǎn)的效果。那么，有沒有可能不而外嵌套呢，方法也是有的。
那就是利用translate來實(shí)現(xiàn)。

@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，將旋轉(zhuǎn)的中心與圓的中心重合，然后進(jìn)行旋轉(zhuǎn)，之后又利用translate，移動(dòng)到原先的位置。最后再圍繞自身中心，進(jìn)行反方向旋轉(zhuǎn)，以達(dá)到內(nèi)容不旋轉(zhuǎn)的效果

代碼詳見https://jsfiddle.net/243wbskt/

其實(shí)，最關(guān)鍵的一點(diǎn)還是在于坐標(biāo)的轉(zhuǎn)換，如下所示：

// 核心要點(diǎn)

// css
transform-origin: x y;  // x, y為元素左上角相對(duì)圓心坐標(biāo)的距離
transform: rotate(30deg);

// 等價(jià)于
// transform-origin: 0 0;
transform: translate(x, y); // x, y為元素左上角相對(duì)圓心坐標(biāo)的距離
transform: rotate(30deg);
transform: translate(-x, -y); // x, y為元素左上角相對(duì)圓心坐標(biāo)的距離

參考鏈接：http://www.w3cplus.com/css3/css-secrets/animation-along-a-circular-path.html