怕標題起的有點大，下述技巧如果你已經掌握了看看就好，歡迎斧正，本文希望通過介紹一些 CSS 不太常用的技巧，輔以一些實踐，讓讀者可以更加深入的理解掌握 CSS 動畫。

廢話少說，直接進入正題，本文提到的動畫不加特殊說明，皆指 CSS 動畫。

正負旋轉相消

嗯。名字起的很奇怪，好像數學概念一樣。

在動畫中，旋轉是非常常用的屬性，

那旋轉有一些什么高級點的技巧呢？當然是可以改變 transfrom-origin ，改變旋轉中心點啦。

開個玩笑，改變旋轉中心點這個估計大家都知道了，這里要介紹的技巧是利用父級元素正反兩個方向的旋轉，來制作一些酷炫的 3d 效果。

首先假設一下場景，我們有這樣的一層 HTML 結構：

樣式如下：

.content 內是我們的主要內容，好了，現在想象一下，如果祖先元素 .rotate 進行正向 linear 360° 旋轉，父級元素 .reverseRotate 進行反向 linear 360° 旋轉，效果回是啥樣？

CSS 代碼如下：

神奇！因為一正一反的旋轉，且緩動函數一樣，所以整個 content 看上去依然是靜止的！注意，這里整個 content 靜止的非常重要。

有讀者看到這里就要罵街了，作者你個智障，靜止了不就沒動畫了嗎？哪來的動畫技巧？

別急！雖然看上去是靜止的，但是其實祖先兩個元素都是在旋轉的！這會看上去風平浪靜的效果底下其實是暗流涌動。用開發者工具選取最外層祖先元素是這樣的：

既然如此，我們繼續思考，如果我在其中旋轉的一個祖先元素上，添加一些別的動畫會是什么效果？想想就很刺激啊。

為了和文案里面的 3D 動畫扯上關系，我們先給這幾個元素添加 3D 轉換：

接著，嘗試修改上面的旋轉動畫，在內層旋轉上額外添加一個 rotateX：