這裡要介紹的技巧是利用父級元素正反兩個方向的旋轉，來製作一些酷炫的 3d 效果。
html結構如下:
<div
class
="reverserotate"
>
<
div
class
="rotate"
>
<
div
class
="content"
>正負旋轉相消3d動畫
div>
div>
div>
.content內是我們的主要內容，好了，現在想象一下，如果祖先元素.rotate進行正向 linear 360° 旋轉，父級元素.reverserotate進行反向 linear 360° 旋轉。
css **如下：
.rotate.reverserotate
@keyframes rotate
}@keyframes reverserotate
}
amazing！因為一正一反的旋轉，且緩動函式一樣，所以整個content看上去依然是靜止的！注意，這裡整個content靜止的非常重要。
but，看上去風平浪靜的效果底下其實是暗流湧動，祖先兩個元素都是在旋轉的。
so，在其中旋轉的乙個祖先元素上，新增一些別的動畫會......上**。
div@keyframes rotate
50%
100%
}
效果，wow~~
有的時候我們頁面存在一些具有相同動畫的元素，為了讓動畫不那麼死板，我們可以給相同的動畫，賦予不同的緩動函式（animation-timing-function），來達到動畫效果。
<div
class
="container"
>
<
div
class
="ball ball1"
>
div>
<
div
class
="ball ball2"
>
div>
<
div
class
="ball ball3"
>
div>
div>
.ball1
.ball2
.ball3
@keyframes move
}
這樣，乙個簡單的 loading 效果就製作好了。（當然這個技巧比較簡單，學會合理運用是關鍵）
緩動函式 timing-function 在動畫中佔據了非常重要的地位。
當你不想使用 css 預設提供的linear、ease-in、ease-out之類緩動函式的，可以自定義cubic-bezier(1, 1, 0, 0)，這裡有個非常好用的工具推薦，下面這個**，可以方便的調出你需要的緩動函式並且拿到對應的 cubic-bezier 。
cubic-bezier.com
我們在製作頁面的時候，為了讓頁面更加有互動感，會給按鈕，陰影，顏色等樣式新增過渡效果，配合 hover 一起使用。
這個是常規思維，如果我們的元素一開始是沒有過渡效果，只有 hover 上去才給它新增乙個過渡，又或者一開始元素是有過渡效果的，當我們 hover 上去時，取消它的過渡，會碰撞出什麼樣的火花呢？
使用這個技巧（也許算不上技巧，純粹好玩），我們可以製作出一些有趣的效果。
可以戳這裡感受一下：
codepen demo -- cancle transition
動畫層級的控制的意思是盡量讓需要進行 css 動畫的元素的z-index保持在頁面最上方，避免瀏覽器建立不必要的圖形層（graphicslayer），能夠很好的提公升渲染效能。
這個坑最早見於張雲龍發布的這篇文章css3硬體加速也有坑，這裡還要總結補充的是：
運用了上面提到的一些小技巧，參考了一些 codepen 上的效果，整了個下述的 3d 數字計數效果。
codepen demo -- 3d number count
動畫技巧 在Flash中自定義滑鼠外觀
在flash中實現自定義滑鼠外觀非常簡單，可以直接通過乙個movieclip就實現了，新建乙個flash程式，然後新增乙個影片剪輯原件，如下圖示。在這個新建的flash元件裡，可以通過繪圖工具繪製或者製作好一張好看的來當做是滑鼠指標外觀樣式，如下是通過鋼筆工具繪製的乙個風格。接下來回到flash舞台...
多層巢狀的CSS 3D動畫技術詳解
ie9及其以下版本完全不支援css 3d transforms技術，opera 12也不支援。具體支援資訊請檢視caniuse.com。css動畫是當前一種非常火爆的技術，我說的並不是一些簡單的顏色變換或長短屬性變換，我說的是3d變換技術 純css實現的翻滾旋轉立方體就是最典型的例子。網上能找到很多...
多層巢狀的CSS 3D動畫技術詳解
ie9及其以下版本完全不支援css 3d transforms技術，opera 12也不支援。具體支援資訊請檢視caniuse.com。css動畫是當前一種非常火爆的技術，我說的並不是一些簡單的顏色變換或長短屬性變換，我說的是3d變換技術 純css實現的翻滾旋轉立方體就是最典型的例子。網上能找到很多...