前幾天遇到一個需求，要求做一個圓周運動的動畫 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;}

whirl.gif

嗯，還不錯，挺流暢的也挺圓潤，但是，就有點太普通了，要不，給他來點立體的？
那得拿出我們的大寶貝 preserve-3d 了！來，走起：

/** 新增樣式 (在之前的基礎上新增) **/
.canvas{ transform-style: preserve-3d; transform: perspective(500px);}
.move{ transform: rotateX(45deg) translateY(240px);}

whirl2.gif

有點立體的那種忽大忽小的感覺了，但是還是有點不完美，因為那個小圓圈沒辦法立起來

因為我們改變了元素的基點位置，導致進行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;}}

whirl_last.gif

怎么樣，是不是很神奇，不依賴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);}}