css3 2d 轉換
internet explorer 10, firefox, 和 opera支援transform 屬性.
chrome 和 safari 要求字首 -webkit- 版本.
注意： internet explorer 9 要求字首 -ms- 版本.
語法：div
屬性 內容
translate() 根據左（x軸）和頂部（y軸）位置給定的引數，從當前位置移動。
rotate() 在乙個給定度數順時針旋轉的元素，負值是允許的，這樣的元素逆時針旋轉。（如rotate值（30deg）元素順時針旋轉30度。）
scale() 該元素增加或減少的大小，取決於寬度（x軸）和高度（y軸）的引數。如（scale（2,3）轉變寬度為原來的大小的2倍，和其原始大小3倍的高度。）
skew() 語法：transfoorm:skew([,]);包含兩個引數值，分別表示x軸和y軸傾斜的角度，如果第二個引數為空，則預設為0，引數為負表示向相反方向傾斜。skewx();表示只在x軸(水平方向)傾斜。skewy();表示只在y軸(垂直方向)傾斜。
matrix() 該方法有6個引數，包含 旋轉，縮放，移動（平移）和傾斜功能。
css3 3d 轉換
轉換屬性
屬性 描述
transform 元素應用2d或3d轉換
transform-origin 允許你改變被轉換元素的位置
transform-style 規定被巢狀元素如何在 3d 空間中顯示
perspective 規定 3d 元素的透視效果
perspective-origin 規定 3d 元素的底部位置
backface-visiblity 定義元素在不面對螢幕時是否可見
3d 轉換方法
函式 描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3d 轉換，使用 16 個值的 4x4 矩陣。
translate3d(x,y,z) 定義 3d 轉化。
translatex(x) 定義 3d 轉化，僅使用用於 x 軸的值。
translatey(y) 定義 3d 轉化，僅使用用於 y 軸的值。
translatez(z) 定義 3d 轉化，僅使用用於 z 軸的值。
scale3d(x,y,z) 定義 3d 縮放轉換。
scalex(x) 定義 3d 縮放轉換，通過給定乙個 x 軸的值。
scaley(y) 定義 3d 縮放轉換，通過給定乙個 y 軸的值。
scalez(z) 定義 3d 縮放轉換，通過給定乙個 z 軸的值。
rotate3d(x,y,z,angle) 定義 3d 旋轉。
rotatex(angle) 定義沿 x 軸的 3d 旋轉。
rotatey(angle) 定義沿 y 軸的 3d 旋轉。
rotatez(angle) 定義沿 z 軸的 3d 旋轉。
perspective(n) 定義 3d 轉換元素的透視檢視。
css3 過渡
css3 過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，必須規定兩項內容：
指定要新增效果的css屬性
指定效果的持續時間。
注意： 如果未指定的期限，transition將沒有任何效果，因為預設值是0。
例：div
過渡屬性
屬性 描述
transition 簡寫屬性，用於在乙個屬性中設定四個過渡屬性。
transition-property 規定應用過渡的 css 屬性的名稱。
transition-duration 定義過渡效果花費的時間。預設是 0。
ransition-timing-function 規定過渡效果的時間曲線。預設是 「ease」。
transition-delay 規定過渡效果何時開始。預設是 0。
css3 動畫
當在 @keyframes 建立動畫，把它繫結到乙個選擇器，否則動畫不會有任何效果。
指定至少這兩個css3的動畫屬性繫結向乙個選擇器：
規定動畫的名稱
規定動畫的時長
@keyframes myfirst
to }
@-webkit-keyframes myfirst /* safari 與 chrome */
to }
div可以使用百分比來規定變化發生的時間
@keyframes myfirst
25%
50%
100%
}@-webkit-keyframes myfirst /* safari 與 chrome */
25%
50%
100%
}css3 動畫屬性
css動畫 幀動畫
動畫 animation 設定關鍵幀 從左上，到右上，到右下的動畫 上面是系統性動畫屬性，下面拆分 animation 綜合性的動畫設定屬性 animation name 動畫名稱 animation duration 動畫的時間週期 animation timing function 動畫變化的速...
譯 CSS動畫 vs JS動畫
目前有兩個主流的方法在web上建立動畫 使用css或js。到底選擇哪種方法來實現動畫，完全取決於你的專案以及你想要達到的效果。tips 很多基礎的動畫都可以通過css或js來實現，但兩者的效果和時間會有差別。兩種方式各有千秋 如果你已經用了類似jquery的包含動畫函式的js框架，你會發現用它來控制...
CSS動畫標籤
keyframes 規則用於建立動畫。它的三個必要的值如下 animationname 定義動畫的名稱 keyframes selector 必需。動畫時長的百分比 css styles 乙個或多個合法的 css 樣式屬性 animation name 規定需要繫結到選擇器的 keyframe 名稱...