transform-style: preserve-3d; 設定3d模式
perspective：700px ；屬性定義 3d 元素距檢視的距離，以畫素計。該屬性允許您改變 3d 元素檢視 3d 元素的檢視。當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身
perspective-origin：50% 50% ；屬性定義 3d 元素所基於的 x 軸和 y 軸。該屬性允許您改變 3d 元素的底部位置。當為元素定義 perspective-origin 屬性時，其子元素會獲得透視效果，而不是元素本身。
設定動畫@keyframes mymove
25%
50%
75%
100%
}
divanimation-timing-function 使用名為三次貝塞爾（cubic bezier）函式的數學函式，來生成速度曲線。您能夠在該函式中使用自己的值，也可以預定義的值： 值描述
測試linear
動畫從頭到尾的速度是相同的。
測試ease
預設。動畫以低速開始，然後加快，在結束前變慢。
測試ease-in
動畫以低速開始。
測試ease-out
動畫以低速結束。
測試ease-in-out
動畫以低速開始和結束。
測試cubic-bezier(n,n,n,n)
在 cubic-bezier 函式中自己的值。可能的值是從 0 到 1 的數值。
css 3d 動畫相關總結
傾斜 transform skew 水平傾斜 transform skew 水平,垂直 transform skewx transform skewy target 選擇器可用於選取當前活動的目標元素。css樣式 圓角 border radius 元素是正方形 寬度的一半px 50 正圓 元素是長方...
CSS 3D動畫筆記
3d 在2d的基礎上新增 z 軸的變化 3d 位移 在2d的基礎上新增 translatez 或者使用translate3d translatez 以方框中心為原點，變大 3d 縮放 在2d的基礎上新增 scalez 或者使用scale3d scalez 和 scale3d 函式單獨使用時沒有任何效...
多層巢狀的CSS 3D動畫技術詳解
ie9及其以下版本完全不支援css 3d transforms技術，opera 12也不支援。具體支援資訊請檢視caniuse.com。css動畫是當前一種非常火爆的技術，我說的並不是一些簡單的顏色變換或長短屬性變換，我說的是3d變換技術 純css實現的翻滾旋轉立方體就是最典型的例子。網上能找到很多...