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
定義元素在不面對螢幕時是否可見 函式
描述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 過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，必須規定兩項內容：
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%
}
描述@keyframes
規定動畫。
animation
所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name
規定 @keyframes 動畫的名稱。
animation-duration
規定動畫完成乙個週期所花費的秒或毫秒。預設是 0。
animation-timing-function
規定動畫的速度曲線。預設是 「ease」。
animation-fill-mode
animation-delay
規定動畫何時開始。預設是 0。
animation-iteration-count
animation-direction
animation-play-state
規定動畫是否正在執行或暫停。預設是 「running」。
css3新特性 過渡 動畫 2d 3d轉換
過渡 過渡三要素 1.必須要有屬性發生變化 如 width background等 2.必須要告訴系統哪個屬性需要執行過渡效果 transition property width,background 3.必須告訴系統過渡效果的持續時長 transition duration 5s,5s trans...
css頁面特效 2D 3D轉換 過渡 動畫
1 2d 3d轉換 通過除css3轉換，能夠對元素進行移動 縮放 轉位 拉長或伸縮等。轉換是使元素改變形狀 尺寸和位置的一種效果。可以使用2d 3d來轉換元素。2d轉換方法 translate 移動 rotate 旋轉 scale 縮放 skew 傾斜 3d轉換方法 rotatex rotatey ...
CSS3屬性（過渡，2D變換，3D變換，動畫）
在css3中，我們如果不使用js 或者flash動畫，想要實現元素從a狀態變成b狀態，並且中間的過程可以被觀察到，那麼可以使用過渡屬性 transitiont ease 由快到慢 預設值 linear 勻速運動 ease in 加速運動 ease out 減速運動 ease in out 先加速後減...