CSS轉換
CSS3 Transform（讓元素在一個坐標系統中變形淘衙，可移動蚓让、旋轉和縮放元素）
transform ： none / <transform-function> [ <transform-function> ]*; /*默認值：transform: none;*/兼容性：IE10+、FireFox16+、Chrome36+徙融、Safari16+窄瘟、Opera23+
2D轉換 - rotate
rotate（通過指定的角度參數對原元素指定一個2D 旋轉）
-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); /*angle指旋轉角度米死，正數表示順時針旋轉锌历，負數表示逆時針旋轉*/
2D轉換 - translate
translateX(x)（僅水平方向移動）
transform: translateX(<translation-value>);
translateY(Y)（僅垂直方向移動）
transform: translateY(<translation-value>);
translate(x, y)（水平方向和垂直方向同時移動）
transform: translate(<translation-value>[, <translation-value>]); /*只寫其中一個則只有水平 / 垂直移動*/
2D轉換 - scale
scaleX(x)（使元素僅水平方向縮放）
transform: scaleX(<number>); /* scale()中不能用 % */
scaleY(y)（使元素僅垂直方向縮放）
transform: scaleY(<number>);
scale(x, y)（使元素水平方向和垂直方向同時縮放）
transform: scale(<number>[, <number>]);
2D轉換 - skew
skewX(x)（使元素在水平方向扭曲變形）
transform: skewX(<angle>); /*逆時針deg為正，順時針deg為負峦筒，與rotate相反*/
skewY(y)（使元素在垂直方向扭曲變形）
transform: scaleX(<number>); /*逆時針deg為負究西，順時針deg為正，與rotate相同*/
skew(x, y)（使元素在水平和垂直方向同時扭曲）
transform: scaleX(<number>); /*只寫其中一個則只有水平 / 垂直扭曲*/
3D轉換 - rotate
rotateX（指定對象在x軸上的旋轉角度）
transform: rotateX(angle);
rotateY（指定對象在y軸上的旋轉角度）
transform: rotateY(angle);
rotateZ（指定對象在z軸上的旋轉角度）
transform: rotateZ(angle);
rotate3d（指定對象的3D旋轉角度）
transform: rotate3d(x, y, z, angle); /*參數不允許省略*/
3D轉換 - translate
translateZ（指定對象Z軸的平移物喷，看不出來）
transform: translateZ(z);
translate3d（指定對象的3D位移）
transform: translate3d(x, y, z); /*參數不允許省略*/
3D轉換 - scale
縮放scaleZ（指定對象的z軸縮放卤材，看不出來）
transform: scaleZ(z);
scale3d（指定對象的3D縮放）
transform: scale3d(x, y, z); /*參數不允許省略*/
Transform與坐標系統
transform-origin（允許更改轉換元素的位置，即轉軸）
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); 對應 a=1, b=0, c=0, d=1, e=30, f=30 根據這個矩陣偏移元素的中心點商膊，假設是(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內核默認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 矩陣轉換
矩陣matrix縮放(scale)
matrix(sx, 0, 0, sy, 0, 0) —— scale(sx, sy)
矩陣matrix旋轉(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 矩陣應用
矩陣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（指定嵌套元素是怎樣在三維空間中呈現）
-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; /*默認值：transform-style: flat; 屬性寫在父元素上*/
perspective（指定觀察者與「z=0」平面的距離堤器，使具有三維位置變換的元素產生透視效果）
-webkit-perspective: 500px; -moz-perspective: 500px; -ms-perspective: 500px; -o-perspective: 500px; perspective: 500px; /*默認值：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; /*默認值：perspective-origin: 50% 50%;*/
backface-visibility（指定元素背面(翻轉后朝向)面向用戶時是否可見）
backface-visibility: visible / hidden; /*默認值：visible*/
CSS3 過渡（Transition）
允許css的屬性值在一定的時間區(qū)間內平滑地過渡，在鼠標單擊末贾、獲得焦點闸溃、被點擊或對元素任何改變中觸>發(fā)，并圓滑地以動畫效果改變CSS的屬性值拱撵。
兼容性：IE10+辉川、FireFox16+、Chrome26+拴测、Safari6.1+乓旗、Opera12.1+
transition-property（規(guī)定設置過渡效果的 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; /*參數說明 - none - all，默認值 - property(CSS屬性名) 例如color集索、opacity...*/
transition-duration（規(guī)定完成過渡效果需要多少時間）
transition-duration: time; /*參數說明 - 規(guī)定完成過渡效果需要花費的時間（以秒或毫秒計） - 默認值是 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>); /*參數說明 ? 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 ] ]?)：接受兩個參數的步進函數 第一個參數：必須為正整數函匕，指定函數的步數 第二個參數：取值可是start或end娱据，指定每一步的值發(fā)生變化的時間點 第二個參數：可選，默認值為end ? cubic-bezier(<number>, <number>, <number>, <number>)： 特定的貝塞爾曲線類型浦箱，4個數值需在[0, 1]區(qū)間內*/
transition-delay（定義過渡效果何時開始）
transition-delay: time; /*參數說明 - 指定秒或毫秒數之前要等待切換效果開始 - 默認值是 0*/
transition復合寫法
transition: property duration timing-function delay;
CSS3動畫
兼容性：IE10+吸耿、FireFox16+祠锣、Chrome43+、Safari9+咽安、Opera30+伴网、Android（-webkit-）
animation-name（規(guī)定需要綁定到選擇器的 keyframe 名稱）
animation-name: keyframename / none; /*參數說明 keyframename：指定要綁定到選擇器的關鍵幀的名稱； none：指定有沒有動畫（可用于覆蓋從級聯的動畫） */
Keyframes（關鍵幀妆棒，可以指定任何順序排列來決定Animation動畫變化的關鍵位置）
@keyframes animationname { keyframes-selector { css-styles; } } /*參數說明 animationname：必寫項澡腾，定義animation的名稱 keyframes-selector：必寫項，動畫持續(xù)時間的百分比糕珊，0-100%动分、from (0%)、to (100%) css-styles：必寫項红选，一個或多個合法的CSS樣式屬性 @keyframes animationname在style中單獨寫入 */
animation-duration（規(guī)定完成動畫所花費的時間澜公，以秒或毫秒計）
animation-duration: time; /*參數說明 time指定動畫播放完成花費的時間。默認值為 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>); /*參數說明 ? 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 ] ]?)：接受兩個參數的步進函數 第一個參數：必須為正整數间学，指定函數的步數 第二個參數：取值可是start或end殷费，指定每一步的值發(fā)生變化的時間點 第二個參數：可選，默認值為end ? cubic-bezier(<number>, <number>, <number>, <number>)： 特定的貝塞爾曲線類型低葫，4個數值需在[0, 1]區(qū)間內*/
animation-delay（規(guī)定在動畫開始之前的延遲）
animation-delay: time; /*參數說明 可選详羡。定義動畫開始前等待的時間，以秒或毫秒計氮采。默認值為0 如果值為負殷绍，則動畫馬上開始，但會跳過相應的時間進入動畫 */
animation-iteration-count（規(guī)定動畫應該播放的次數）
animation-iteration-count: infinite / <number>; /*參數說明 <number>為數字鹊漠，其默認值為“1”主到；infinite為無限次數循環(huán) */
animation-direction（規(guī)定是否應該輪流反向播放動畫）
animation-direction: normal / reverse / alternate / alternate-reverse / initial / inherit; /*參數說明 normal：正常方向 reverse：反方向運行 alternate：先正后反，并持續(xù)交替運行（需依賴infinite） alternate-reverse：先反后正躯概，并持續(xù)交替運行（需依賴infinite） */
animation-fill-mode（規(guī)定當動畫完成或當動畫有延遲未開始播放時登钥，要應用到元素的樣式）
animation-fill-mode: none / forwards / backwards / both / initial / inherit; /*參數說明 none：默認值。不設置對象動畫之外的狀態(tài) forwards：設置對象狀態(tài)為動畫結束時的狀態(tài) backwards：設置對象狀態(tài)為動畫開始時的狀態(tài) both：設置對象狀態(tài)為動畫結束或開始的狀態(tài) */
animation-play-state（規(guī)定動畫運行或暫停）
animation-play-state: paused / running; /*參數說明 paused：指定暫停動畫 running：默認值娶靡，指定正在運行的動畫 */
animation（復合寫法）
animation: name duration timing-function delay iteration-count direction fill-mode play-state; /*參數說明 默認寫在前面的時間為duration */
will-change（增強頁面渲染性能）
即提前通知瀏覽器元素將要做什么動畫牧牢，讓瀏覽器提前準備合適的優(yōu)化設置
will-change: auto / scroll-position / contents / <custom-ident> / <animateable-feature>; /*參數說明 auto：此關鍵字表示沒有特定的意圖，適用于它通常所做的任何啟發(fā)式和優(yōu)化 scroll-position：表示將要改變元素的滾動位置 contents：表示將要改變元素的內容 <custom-ident>：明確指定將要改變的屬性與給定的名稱 <animateable-feature>：可動畫的一些特征值，比如left塔鳍、top伯铣、margin等 */ 兼容性：IE13+、FireFox47+轮纫、Chrome49+腔寡、Safari9.1+、Opera39+掌唾、IOS9.3+放前、Android52+
