CSS轉(zhuǎn)換
CSS3 Transform（讓元素在一個坐標(biāo)系統(tǒng)中變形，可移動、旋轉(zhuǎn)和縮放元素）
transform ： none / <transform-function> [ <transform-function> ]*; /*默認(rèn)值：transform: none;*/兼容性：IE10+、FireFox16+、Chrome36+、Safari16+、Opera23+
2D轉(zhuǎn)換 - rotate
rotate（通過指定的角度參數(shù)對原元素指定一個2D 旋轉(zhuǎn)）
-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); /*angle指旋轉(zhuǎn)角度，正數(shù)表示順時針旋轉(zhuǎn)，負(fù)數(shù)表示逆時針旋轉(zhuǎn)*/
2D轉(zhuǎn)換 - translate
translateX(x)（僅水平方向移動）
transform: translateX(<translation-value>);
translateY(Y)（僅垂直方向移動）
transform: translateY(<translation-value>);
translate(x, y)（水平方向和垂直方向同時移動）
transform: translate(<translation-value>[, <translation-value>]); /*只寫其中一個則只有水平 / 垂直移動*/
2D轉(zhuǎn)換 - scale
scaleX(x)（使元素僅水平方向縮放）
transform: scaleX(<number>); /* scale()中不能用 % */
scaleY(y)（使元素僅垂直方向縮放）
transform: scaleY(<number>);
scale(x, y)（使元素水平方向和垂直方向同時縮放）
transform: scale(<number>[, <number>]);
2D轉(zhuǎn)換 - skew
skewX(x)（使元素在水平方向扭曲變形）
transform: skewX(<angle>); /*逆時針deg為正，順時針deg為負(fù)，與rotate相反*/
skewY(y)（使元素在垂直方向扭曲變形）
transform: scaleX(<number>); /*逆時針deg為負(fù)，順時針deg為正，與rotate相同*/
skew(x, y)（使元素在水平和垂直方向同時扭曲）
transform: scaleX(<number>); /*只寫其中一個則只有水平 / 垂直扭曲*/
3D轉(zhuǎn)換 - rotate
rotateX（指定對象在x軸上的旋轉(zhuǎn)角度）
transform: rotateX(angle);
rotateY（指定對象在y軸上的旋轉(zhuǎn)角度）
transform: rotateY(angle);
rotateZ（指定對象在z軸上的旋轉(zhuǎn)角度）
transform: rotateZ(angle);
rotate3d（指定對象的3D旋轉(zhuǎn)角度）
transform: rotate3d(x, y, z, angle); /*參數(shù)不允許省略*/
3D轉(zhuǎn)換 - translate
translateZ（指定對象Z軸的平移，看不出來）
transform: translateZ(z);
translate3d（指定對象的3D位移）
transform: translate3d(x, y, z); /*參數(shù)不允許省略*/
3D轉(zhuǎn)換 - scale
縮放scaleZ（指定對象的z軸縮放，看不出來）
transform: scaleZ(z);
scale3d（指定對象的3D縮放）
transform: scale3d(x, y, z); /*參數(shù)不允許省略*/
Transform與坐標(biāo)系統(tǒng)
transform-origin（允許更改轉(zhuǎn)換元素的位置，即轉(zhuǎn)軸）
transform-origin: x-axis y-axis z-axis; /*單位px / % / left / top / ...*/
CSS3 矩陣
matrix（元素2D平面的移動變換(transform)，2D變換矩陣為3*3）
transform: matrix(a, b, c, d, tx, ty); /*transform: matrix(1, 0, 0, 1, 30, 30); 對應(yīng) a=1, b=0, c=0, d=1, e=30, f=30 根據(jù)這個矩陣偏移元素的中心點，假設(shè)是(0, 0)，即x = 0, y = 0 變換后，x=ax+cy+e=1*0+0*0+30=30，y=bx+dy+f=0*0+0*1+30=30 于是，整個元素的中心點從(0, 0)變成了(30, 30)，整個元素就發(fā)生了平移 所以transform: matrix(1, 0, 0, 1, x, y)等同于transform: translate(x, y)*/注意：matrix在FF瀏覽器下需添加單位，webkit內(nèi)核默認(rèn)px
matrix3d（元素3D的移動變換(transform)，3D變換則是4*4的矩陣）
transform: matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1); /*等同于transform: scale3d(x, y, z);*/
CSS3 矩陣轉(zhuǎn)換
矩陣matrix縮放(scale)
matrix(sx, 0, 0, sy, 0, 0) —— scale(sx, sy)
矩陣matrix旋轉(zhuǎn)(rotate)
matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0) —— rotate(θdeg)
矩陣matrix拉伸(skew)
matrix(1, tanθy, tanθx, 1, 0, 0) —— skew(θxdeg, θydeg)
CSS3 矩陣應(yīng)用
矩陣matrix鏡像對稱效果
y=kx.jpgtransform: matrix((1-k*k) / (1+k*k), 2k / (1 + k*k), 2k / (1 + k*k), (k*k - 1) / (1+k*k), 0, 0);
CSS3 擴展屬性
transform-style（指定嵌套元素是怎樣在三維空間中呈現(xiàn)）
-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; /*默認(rèn)值：transform-style: flat; 屬性寫在父元素上*/
perspective（指定觀察者與「z=0」平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果）
-webkit-perspective: 500px; -moz-perspective: 500px; -ms-perspective: 500px; -o-perspective: 500px; perspective: 500px; /*默認(rèn)值：none*/
perspective-origin（指定透視點的位置）
-webkit-perspective-origin: x-axis y-axis; -moz-perspective-origin: x-axis y-axis; -ms-perspective-origin: x-axis y-axis; -o-perspective-origin: x-axis y-axis; perspective-origin: x-axis y-axis; /*默認(rèn)值：perspective-origin: 50% 50%;*/
backface-visibility（指定元素背面(翻轉(zhuǎn)后朝向)面向用戶時是否可見）
backface-visibility: visible / hidden; /*默認(rèn)值：visible*/
CSS3 過渡（Transition）
允許css的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡，在鼠標(biāo)單擊、獲得焦點、被點擊或?qū)υ厝魏胃淖冎杏|>發(fā)，并圓滑地以動畫效果改變CSS的屬性值。
兼容性：IE10+、FireFox16+、Chrome26+、Safari6.1+、Opera12.1+
transition-property（規(guī)定設(shè)置過渡效果的 CSS 屬性名）
-webkit-transition-property: none / all / property; -moz-transition-property: none / all / property; -ms-transition-property: none / all / property; -o-transition-property: none / all / property; transition-property: none / all / property; /*參數(shù)說明 - none - all，默認(rèn)值 - property(CSS屬性名) 例如color、opacity...*/
transition-duration（規(guī)定完成過渡效果需要多少時間）
transition-duration: time; /*參數(shù)說明 - 規(guī)定完成過渡效果需要花費的時間（以秒或毫秒計） - 默認(rèn)值是 0*/
transition-timing-function（規(guī)定速度效果的速度曲線）
transition-timing-function: ease / linear / ease-in / ease-out / ease-in-out step-start / step-end / steps(<integer>, [ start / end ]) cubic-bezier(<number>, <number>, <number>, <number>); /*參數(shù)說明 ? linear：線性過渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0) ? ease：平滑過渡。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0) ? ease-in：由慢到快。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0) ? ease-out：由快到慢。等同于貝塞爾曲線(0, 0, 0.58, 1.0) ? ease-in-out：由慢到快再到慢。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)（最佳效果） ? step-start：等同于 steps(1, start) ? step-end：等同于 steps(1, end) ? steps(<integer>[, [ start | end ] ]?)：接受兩個參數(shù)的步進(jìn)函數(shù) 第一個參數(shù)：必須為正整數(shù)，指定函數(shù)的步數(shù) 第二個參數(shù)：取值可是start或end，指定每一步的值發(fā)生變化的時間點 第二個參數(shù)：可選，默認(rèn)值為end ? cubic-bezier(<number>, <number>, <number>, <number>)： 特定的貝塞爾曲線類型，4個數(shù)值需在[0, 1]區(qū)間內(nèi)*/
transition-delay（定義過渡效果何時開始）
transition-delay: time; /*參數(shù)說明 - 指定秒或毫秒數(shù)之前要等待切換效果開始 - 默認(rèn)值是 0*/
transition復(fù)合寫法
transition: property duration timing-function delay;
CSS3動畫
兼容性：IE10+、FireFox16+、Chrome43+、Safari9+、Opera30+、Android（-webkit-）
animation-name（規(guī)定需要綁定到選擇器的 keyframe 名稱）
animation-name: keyframename / none; /*參數(shù)說明 keyframename：指定要綁定到選擇器的關(guān)鍵幀的名稱； none：指定有沒有動畫（可用于覆蓋從級聯(lián)的動畫） */
Keyframes（關(guān)鍵幀，可以指定任何順序排列來決定Animation動畫變化的關(guān)鍵位置）
@keyframes animationname { keyframes-selector { css-styles; } } /*參數(shù)說明 animationname：必寫項，定義animation的名稱 keyframes-selector：必寫項，動畫持續(xù)時間的百分比，0-100%、from (0%)、to (100%) css-styles：必寫項，一個或多個合法的CSS樣式屬性 @keyframes animationname在style中單獨寫入 */
animation-duration（規(guī)定完成動畫所花費的時間，以秒或毫秒計）
animation-duration: time; /*參數(shù)說明 time指定動畫播放完成花費的時間。默認(rèn)值為 0，意味著沒有動畫效果 */
animation-timing-function（規(guī)定動畫的速度曲線）
animation-timing-function: ease / linear / ease-in / ease-out / ease-in-out step-start / step-end / steps(<integer>, [ start / end ]) cubic-bezier(<number>, <number>, <number>, <number>); /*參數(shù)說明 ? linear：線性過渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0) ? ease：平滑過渡。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0) ? ease-in：由慢到快。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0) ? ease-out：由快到慢。等同于貝塞爾曲線(0, 0, 0.58, 1.0) ? ease-in-out：由慢到快再到慢。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)（最佳效果） ? step-start：等同于 steps(1, start) ? step-end：等同于 steps(1, end) ? steps(<integer>[, [ start | end ] ]?)：接受兩個參數(shù)的步進(jìn)函數(shù) 第一個參數(shù)：必須為正整數(shù)，指定函數(shù)的步數(shù) 第二個參數(shù)：取值可是start或end，指定每一步的值發(fā)生變化的時間點 第二個參數(shù)：可選，默認(rèn)值為end ? cubic-bezier(<number>, <number>, <number>, <number>)： 特定的貝塞爾曲線類型，4個數(shù)值需在[0, 1]區(qū)間內(nèi)*/
animation-delay（規(guī)定在動畫開始之前的延遲）
animation-delay: time; /*參數(shù)說明 可選。定義動畫開始前等待的時間，以秒或毫秒計。默認(rèn)值為0 如果值為負(fù)，則動畫馬上開始，但會跳過相應(yīng)的時間進(jìn)入動畫 */
animation-iteration-count（規(guī)定動畫應(yīng)該播放的次數(shù)）
animation-iteration-count: infinite / <number>; /*參數(shù)說明 <number>為數(shù)字，其默認(rèn)值為“1”；infinite為無限次數(shù)循環(huán) */
animation-direction（規(guī)定是否應(yīng)該輪流反向播放動畫）
animation-direction: normal / reverse / alternate / alternate-reverse / initial / inherit; /*參數(shù)說明 normal：正常方向 reverse：反方向運行 alternate：先正后反，并持續(xù)交替運行（需依賴infinite） alternate-reverse：先反后正，并持續(xù)交替運行（需依賴infinite） */
animation-fill-mode（規(guī)定當(dāng)動畫完成或當(dāng)動畫有延遲未開始播放時，要應(yīng)用到元素的樣式）
animation-fill-mode: none / forwards / backwards / both / initial / inherit; /*參數(shù)說明 none：默認(rèn)值。不設(shè)置對象動畫之外的狀態(tài) forwards：設(shè)置對象狀態(tài)為動畫結(jié)束時的狀態(tài) backwards：設(shè)置對象狀態(tài)為動畫開始時的狀態(tài) both：設(shè)置對象狀態(tài)為動畫結(jié)束或開始的狀態(tài) */
animation-play-state（規(guī)定動畫運行或暫停）
animation-play-state: paused / running; /*參數(shù)說明 paused：指定暫停動畫 running：默認(rèn)值，指定正在運行的動畫 */
animation（復(fù)合寫法）
animation: name duration timing-function delay iteration-count direction fill-mode play-state; /*參數(shù)說明 默認(rèn)寫在前面的時間為duration */
will-change（增強頁面渲染性能）
即提前通知瀏覽器元素將要做什么動畫，讓瀏覽器提前準(zhǔn)備合適的優(yōu)化設(shè)置
will-change: auto / scroll-position / contents / <custom-ident> / <animateable-feature>; /*參數(shù)說明 auto：此關(guān)鍵字表示沒有特定的意圖，適用于它通常所做的任何啟發(fā)式和優(yōu)化 scroll-position：表示將要改變元素的滾動位置 contents：表示將要改變元素的內(nèi)容 <custom-ident>：明確指定將要改變的屬性與給定的名稱 <animateable-feature>：可動畫的一些特征值，比如left、top、margin等 */ 兼容性：IE13+、FireFox47+、Chrome49+、Safari9.1+、Opera39+、IOS9.3+、Android52+
