css3 3D

● css3 3D旋轉
○ rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉
○ rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉
○ rotateZ(angle)，定義沿 Z 軸的 3D 旋轉。
● 3D景深
○ perspective(n)，景深，離屏幕多遠的距離去觀察屏幕。（值越大幅度越小）
○ perspective-origin景深的基點。該屬性允許改變 3D 元素的底部位置。（就是觀察角度）
● css3 3D平移
○ translateZ(z),z軸平移
● css 3D立體空間
○ transform-origin:(x,y,z)設置旋轉元素的基點位置,該屬性必須與 transform 屬性一同使用。
○ transform-style:flat(子元素不保留其3d位置)/preserve-3d（子元素保留其3d位置）規定被嵌套元素如何在 3D 空間中顯示。
○ backface-visibility定義元素在不面對屏幕時是否可見。（了解）
● css3 3D縮放
○ scaleZ(z)定義 3D 縮放轉換，通過給定一個 Z 軸的值
注釋：Internet Explorer 10 和 Firefox 支持 3D 轉換。
Chrome 和 Safari 需要前綴 -webkit-。
Opera 仍然不支持 3D 轉換（它只支持 2D 轉換）。
● css3 動畫
○ @keyframes 規則 用于創建動畫。在 @keyframes 中規定某項 CSS 樣式，能創建由當前樣式逐漸改為新樣式的動畫效果。
○ animation-name規定 @keyframes 動畫的名稱。
○ animation-duration規定動畫完成一個周期所花費的秒或毫秒。默認是 0
○ animation-timing-function規定動畫的速度曲線。默認是 "ease"
● ease規定慢速開始，然后變快，然后慢速結束的過渡效果
● linear規定以相同速度開始至結束的過渡效果
● ease-in規定以慢速開始的過渡效果
● ease-out規定以慢速結束的過渡效果
● ease-in-out規定以慢速開始和結束的過渡效果
● step-start跳到每幀開始
● step-end跳到每幀結束
○ animation-delay規定動畫何時開始。默認是 0，允許負值；
○ animation-iteration-count規定動畫被播放的次數。默認是 1，
■ infinite無限循環
○ animation-direction規定動畫是否在下一周期逆向地播放。默認是 "normal"
■ alternate反向播放
○ animation:name duration timing-function delay iteration-count direction;
○ animation-play-state規定動畫是否正在運行或暫停。默認是 "running"。
■ paused暫停
○ animation-fill-mode規定對象動畫時間之外的狀態。
■ none不改變默認行為
■ forwards當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。
注釋：在 @keyframes 中創建動畫時，把它捆綁到某個選擇器，否則不會產生動畫效果。通過規定至少以下兩項 CSS3 動畫屬性，即可將動畫綁 定到選擇器：
1.規定動畫的名稱
2.規定動畫的時長
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規則和 animation 屬性。
Chrome 和 Safari 需要前綴 -webkit-。
Internet Explorer 9，以及更早的版本，不支持 @keyframe 規則或 animation 屬性。