transform變換
語法：transform: rotate | scale | skew | translate |matrix;
1彭羹、translate(x,y) 設(shè)置盒子位移
（1）1、translate(<translation-value>[, <translation-value>]) ：通過矢量[tx, ty]指定一個(gè)2D translation泪酱，tx 是第一個(gè)過渡值參數(shù)派殷，ty 是第二個(gè)過渡值參數(shù)選項(xiàng)。如果 未被提供墓阀，則ty以 0 作為其值毡惜。也就是translate(x,y),它表示對(duì)象進(jìn)行平移，按照設(shè)定的x,y參數(shù)值,當(dāng)值為負(fù)數(shù)時(shí)斯撮，反方向移動(dòng)物體经伙，其基點(diǎn)默認(rèn)為元素 中心點(diǎn)，也可以根據(jù)transform-origin進(jìn)行改變基點(diǎn)勿锅。如transform:translate(100px,20px):
image
（2）translateX(<translation-value>) ： 通過給定一個(gè)X方向上的數(shù)目指定一個(gè)translation帕膜。只向x軸進(jìn)行移動(dòng)元素，同樣其基點(diǎn)是元素中心點(diǎn)粱甫，也可以根據(jù)transform-origin改變基點(diǎn)位置泳叠。如：transform:translateX(100px):
image
（3）translateY(<translation-value>) ：通過給定Y方向的數(shù)目指定一個(gè)translation。只向Y軸進(jìn)行移動(dòng)茶宵，基點(diǎn)在元素心點(diǎn)危纫，可以通過transform-origin改變基點(diǎn)位置。如：transform:translateY(20px):
image
2乌庶、scale(x,y) 設(shè)置盒子縮放
縮放scale和移動(dòng)translate是極其相似种蝶，他也具有三種情況：scale(x,y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）；scaleX(x)元素僅水平方向縮放（X軸縮放）瞒大；scaleY(y)元素僅垂直方向縮放（Y軸縮放）螃征，但它們具有相同的縮放中心點(diǎn)和基數(shù)，其中心點(diǎn)就是元素的中心位置透敌，縮放基數(shù)為1盯滚，如果其值大于1元素就放大踢械，反之其值小于1，元素縮小魄藕。下面我們具體來看看這三種情況具體使用方法：
（1）scale(<number>[, <number>])：提供執(zhí)行[sx,sy]縮放矢量的兩個(gè)參數(shù)指定一個(gè)2D scale（2D縮放）内列。如果第二個(gè)參數(shù)未提供，則取與第一個(gè)參數(shù)一樣的值背率。scale(X,Y)是用于對(duì)元素進(jìn)行縮放话瞧，可以通過transform-origin對(duì)元素的基點(diǎn)進(jìn)行設(shè)置，同樣基點(diǎn)在元素中心位置寝姿；基中X表示水平方向縮放的倍數(shù)交排，Y表示垂直方向的縮放倍數(shù)，而Y是一個(gè)可選參數(shù)饵筑，如果沒有設(shè)置Y值埃篓，則表示X，Y兩個(gè)方向的縮放倍數(shù)是一樣的翻翩。并以X為準(zhǔn)都许。如：transform:scale(2,1.5):
image
（2）scaleX(<number>) ： 使用 [sx,1] 縮放矢量執(zhí)行縮放操作，sx為所需參數(shù)嫂冻。scaleX表示元素只在X軸(水平方向)縮放元素胶征，他的默認(rèn)值是(1,1)，其基點(diǎn)一樣是在元素的中心位置桨仿，我們同樣是通過transform-origin來改變元素的基點(diǎn)睛低。如：transform:scaleX(2):
image
（3）scaleY(<number>) ： 使用 [1,sy] 縮放矢量執(zhí)行縮放操作，sy為所需參數(shù)服傍。scaleY表示元素只在Y軸（垂直方向）縮放元素钱雷，其基點(diǎn)同樣是在元素中心位置，可以通過transform-origin來改變元素的基點(diǎn)吹零。如transform:scaleY(2):
image
3罩抗、rotate(deg) 設(shè)置盒子旋轉(zhuǎn)
rotate(<angle>) ：通過指定的角度參數(shù)對(duì)原元素指定一個(gè)2D rotation（2D 旋轉(zhuǎn)），需先有transform-origin屬性的定義灿椅。transform-origin定義的是旋轉(zhuǎn)的基點(diǎn)套蒂，其中angle是指旋轉(zhuǎn)角度，如果設(shè)置的值為正數(shù)表示順時(shí)針旋轉(zhuǎn)茫蛹，如果設(shè)置的值為負(fù)數(shù)操刀，則表示逆時(shí)針旋轉(zhuǎn)。如：transform:rotate(30deg):
image
4婴洼、skew(x-angle,y-angle) 設(shè)置盒子斜切
扭曲skew和translate骨坑、scale一樣同樣具有三種情況：skew(x,y)使元素在水平和垂直方向同時(shí)扭曲（X軸和Y軸同時(shí)按一定的角度值進(jìn)行扭曲變形）；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）柬采；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）欢唾，具體使用如下：
（1）skew(<angle> [, <angle>]) ：X軸Y軸上的skew transformation（斜切變換）且警。第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸礁遣。如果第二個(gè)參數(shù)未提供振湾，則值為0，也就是Y軸方向上無斜切亡脸。skew是用來對(duì)元素進(jìn)行扭曲變行，第一個(gè)參數(shù)是水平方向扭曲角度树酪，第二個(gè)參數(shù)是垂直方向扭曲角度浅碾。其中第二個(gè)參數(shù)是可選參數(shù)，如果沒有設(shè)置第二個(gè)參數(shù)续语，那么Y軸為0deg垂谢。同樣是以元素中心為基點(diǎn)，我們也可以通過transform-origin來改變元素的基點(diǎn)位置疮茄。如：transform:skew(30deg,10deg):
image
（2）skewX(<angle>) ： 按給定的角度沿X軸指定一個(gè)skew transformation（斜切變換）滥朱。skewX是使元素以其中心為基點(diǎn)，并在水平方向（X軸）進(jìn)行扭曲變行力试，同樣可以通過transform-origin來改變元素的基點(diǎn)徙邻。如：transform:skewX(30deg)
image
（3）skewY(<angle>) ： 按給定的角度沿Y軸指定一個(gè)skew transformation（斜切變換）。skewY是用來設(shè)置元素以其中心為基點(diǎn)并按給定的角度在垂直方向（Y軸）扭曲變形畸裳。同樣我們可以通過transform-origin來改變元素的基點(diǎn)缰犁。如：transform:skewY（10deg）
image
5、perspective 設(shè)置透視距離
6怖糊、transform-style flat | preserve-3d 設(shè)置盒子是否按3d空間顯示
7帅容、translateX、translateY伍伤、translateZ 設(shè)置三維移動(dòng)
8并徘、rotateX、rotateY扰魂、rotateZ 設(shè)置三維旋轉(zhuǎn)
9麦乞、scaleX、scaleY阅爽、scaleZ 設(shè)置三維縮放
10路幸、tranform-origin 設(shè)置變形的中心點(diǎn)
主要作用就是讓我們在進(jìn)行transform動(dòng)作之前可以改變元素的基點(diǎn)位置，因?yàn)槲覀冊啬J(rèn)基點(diǎn)就是其中心位置付翁，換句話說我們沒有使用transform-origin改變元素基點(diǎn)位置的情況下简肴，transform進(jìn)行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置進(jìn)行變化的。但有時(shí)候我們需要在不同的位置對(duì)元素進(jìn)行這些操作百侧，那么我們就可以使用transform-origin來對(duì)元素進(jìn)行基點(diǎn)位置改變砰识，使元素基點(diǎn)不在是中心位置能扒，以達(dá)到你需要的基點(diǎn)位置。下面我們主要來看看其使用規(guī)則：
transform-origin(X,Y):用來設(shè)置元素的運(yùn)動(dòng)的基點(diǎn)（參照點(diǎn)）辫狼。默認(rèn)點(diǎn)是元素的中心點(diǎn)初斑。其中X和Y的值可以是百分值,em,px，其中X也可以是字符參數(shù)值left,center,right膨处；Y和X一樣除了百分值外還可以設(shè)置字符值top,center,bottom见秤，這個(gè)看上去有點(diǎn)像我們background-position設(shè)置一樣；下面我列出他們相對(duì)應(yīng)的寫法：
*top left | left top 等價(jià)于 0 0 | 0% 0%
*top | top center | center top 等價(jià)于 50% 0
*III真椿、right top | top right 等價(jià)于 100% 0
*left | left center | center left 等價(jià)于 0 50% | 0% 50%
*center | center center 等價(jià)于 50% 50%（默認(rèn)值）
*right | right center | center right 等價(jià)于 100% 50%
*bottom left | left bottom 等價(jià)于 0 100% | 0% 100%
*bottom | bottom center | center bottom 等價(jià)于 50% 100%
*bottom right | right bottom 等價(jià)于 100% 100%
其中 left,center right是水平方向取值鹃答，對(duì)應(yīng)的百分值為left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一個(gè)值突硝，表示垂直方向值不變测摔，我們分別來看看以下幾個(gè)實(shí)例
(1)transform-origin:(left,top):
image
(2)transform-origin:right
image
(3)transform-origin(25%,75%)
image
11、backface-visibility 設(shè)置盒子背面是否可見
transform在不同瀏覽器內(nèi)核下的書寫規(guī)則
//Mozilla內(nèi)核瀏覽器：firefox3.5+
-moz-transform: rotate | scale | skew | translate ;
//Webkit內(nèi)核瀏覽器：Safari and Chrome
-webkit-transform: rotate | scale | skew | translate ;
//Opera
-o-transform: rotate | scale | skew | translate ;
//IE9
-ms-transform: rotate | scale | skew | translate ;
//W3C標(biāo)準(zhǔn)
transform: rotate | scale | skew | translate ;
transition主要包含四個(gè)屬性值：執(zhí)行變換的屬性：transition-property,變換延續(xù)的時(shí)間：transition-duration,在延續(xù)時(shí)間段解恰，變換的速率變化transition-timing-function,變換延遲時(shí)間transition-delay锋八。下面分別來看這四個(gè)屬性值
一、transition-property:
語法：
transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*
transition-property是用來指定當(dāng)元素其中一個(gè)屬性改變時(shí)執(zhí)行transition效果护盈，其主要有以下幾個(gè)值：none(沒有屬性改變)挟纱；all（所有屬性改變）這個(gè)也是其默認(rèn)值；indent（元素屬性名）黄琼。當(dāng)其值為none時(shí)樊销，transition馬上停止執(zhí)行，當(dāng)指定為all時(shí)脏款，則元素產(chǎn)生任何屬性值變化時(shí)都將執(zhí)行transition效果围苫，ident是可以指定元素的某一個(gè)屬性值。其對(duì)應(yīng)的類型如下：
1撤师、color: 通過紅剂府、綠、藍(lán)和透明度組件變換（每個(gè)數(shù)值處理）如：background-color,border-color,color,outline-color等css屬性剃盾；
2腺占、length: 真實(shí)的數(shù)字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等屬性；
3痒谴、percentage:真實(shí)的數(shù)字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等屬性衰伯；
4、integer離散步驟（整個(gè)數(shù)字）积蔚，在真實(shí)的數(shù)字空間意鲸，以及使用floor()轉(zhuǎn)換為整數(shù)時(shí)發(fā)生 如：outline-offset,z-index等屬性；
5、number真實(shí)的（浮點(diǎn)型）數(shù)值怎顾，如：zoom,opacity,font-weight,等屬性读慎；
6、transform list:詳情請參閱：《CSS3 Transform》
7槐雾、rectangle:通過x, y, width 和 height（轉(zhuǎn)為數(shù)值）變換夭委，如：crop
8、visibility: 離散步驟募强，在0到1數(shù)字范圍之內(nèi)株灸，0表示“隱藏”，1表示完全“顯示”,如：visibility
9擎值、shadow: 作用于color, x, y 和 blur（模糊）屬性,如：text-shadow
10蚂且、gradient: 通過每次停止時(shí)的位置和顏色進(jìn)行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數(shù)值以便執(zhí)行動(dòng)畫,如：background-image
11幅恋、paint server (SVG): 只支持下面的情況：從gradient到gradient以及color到color，然后工作與上面類似
12泵肄、space-separated list of above:如果列表有相同的項(xiàng)目數(shù)值捆交，則列表每一項(xiàng)按照上面的規(guī)則進(jìn)行變化，否則無變化
13腐巢、a shorthand property: 如果縮寫的所有部分都可以實(shí)現(xiàn)動(dòng)畫品追，則會(huì)像所有單個(gè)屬性變化一樣變化
具體什么css屬性可以實(shí)現(xiàn)transition效果，在W3C官網(wǎng)中列出了所有可以實(shí)現(xiàn)transition效果的CSS屬性值以及值的類型冯丙，大家可以點(diǎn)這里了解詳情肉瓦。這里需要提醒一點(diǎn)是，并不是什么屬性改變都為觸發(fā)transition動(dòng)作效果胃惜，比如頁面的自適應(yīng)寬度泞莉，當(dāng)瀏覽器改變寬度時(shí)，并不會(huì)觸發(fā)transition的效果船殉。但上述表格所示的屬性類型改變都會(huì)觸發(fā)一個(gè)transition動(dòng)作效果鲫趁。
二、transition-duration:
語法：
transition-duration ： <time> [, <time>]
transition-duration是用來指定元素 轉(zhuǎn)換過程的持續(xù)時(shí)間利虫，取值：<time>為數(shù)值挨厚，單位為s（秒）或者ms(毫秒),可以作用于所有元素，包括:before和:after偽元素糠惫。其默認(rèn)值是0疫剃，也就是變換時(shí)是即時(shí)的。
三硼讽、transition-timing-function:
語法：
transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]
取值：
transition-timing-function的值允許你根據(jù)時(shí)間的推進(jìn)去改變屬性值的變換速率巢价，transition-timing-function有6個(gè)可能值：
1、ease：（逐漸變慢）默認(rèn)值，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
2蹄溉、linear：（勻速）咨油，linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)柒爵，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).
4役电、ease-out：（減速），ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0).
5棉胀、ease-in-out：（加速然后減速）法瑟，ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（該值允許你去自定義一個(gè)時(shí)間曲線）唁奢， 特定的cubic-bezier曲線霎挟。 (x1, y1, x2, y2)四個(gè)值特定于曲線上點(diǎn)P1和點(diǎn)P2。所有值需在[0, 1]區(qū)域內(nèi)麻掸，否則無效酥夭。
其是cubic-bezier為通過貝賽爾曲線來計(jì)算“轉(zhuǎn)換”過程中的屬性值，如下曲線所示脊奋，通過改變P1(x1, y1)和P2(x2, y2)的坐標(biāo)可以改變整個(gè)過程的Output Percentage熬北。初始默認(rèn)值為default.
其他幾個(gè)屬性的示意圖：
四、transition-delay:
語法：
transition-delay ： <time> [, <time>]*
transition-delay是用來指定一個(gè)動(dòng)畫開始執(zhí)行的時(shí)間诚隙，也就是說當(dāng)改變元素屬性值后多長時(shí)間開始執(zhí)行transition效果讶隐，其取值：<time>為數(shù)值，單位為s（秒）或者ms(毫秒)久又，其使用和transition-duration極其相似巫延，也可以作用于所有元素，包括:before和:after偽元素地消。 默認(rèn)大小是"0"炉峰，也就是變換立即執(zhí)行，沒有延遲脉执。
有時(shí)我們不只改變一個(gè)css效果的屬性,而是想改變兩個(gè)或者多個(gè)css屬性的transition效果讲冠，那么我們只要把幾個(gè)transition的聲明串在一起，用逗號(hào)（“适瓦，”）隔開竿开，然后各自可以有各自不同的延續(xù)時(shí)間和其時(shí)間的速率變換方式。但需要值得注意的一點(diǎn)：transition-delay與transition-duration的值都是時(shí)間玻熙，所以要區(qū)分它們在連寫中的位置否彩，一般瀏覽器會(huì)根據(jù)先后順序決定，第一個(gè)可以解析為時(shí)間的怭值為transition-duration第二個(gè)為transition-delay嗦随。如：
a {
-moz-transition: background 0.5s ease-in,color 0.3s ease-out;
-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
-o-transition: background 0.5s ease-in,color 0.3s ease-out;
transition: background 0.5s ease-in,color 0.3s ease-out;
}
如果你想給元素執(zhí)行所有transition效果的屬性列荔，那么我們還可以利用all屬性值來操作敬尺，此時(shí)他們共享同樣的延續(xù)時(shí)間以及速率變換方式，如：
a {
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
綜合上述我們可以給transition一個(gè)速記法：transition: <property> <duration> <animation type> <delay>如下圖所示：
相對(duì)應(yīng)的一個(gè)示例代碼：
p {
-webkit-transition: all .5s ease-in-out 1s;
-o-transition: all .5s ease-in-out 1s;
-moz-transition: all .5s ease-in-out 1s;
transition: all .5s ease-in-out 1s;
}
瀏覽器的兼容性:
因?yàn)閠ransition最早是有由webkit內(nèi)核瀏覽器提出來的贴浙，mozilla和opera都是最近版本才支持這個(gè)屬性砂吞，而我們的大眾型瀏覽器IE全家都是不支持，另外由于各大現(xiàn)代瀏覽器Firefox,Safari,Chrome,Opera都還不支持W3C的標(biāo)準(zhǔn)寫法崎溃，所以在應(yīng)用transition時(shí)我們有必要加上各自的前綴蜻直，最好在放上我們W3C的標(biāo)準(zhǔn)寫法，這樣標(biāo)準(zhǔn)的會(huì)覆蓋前面的寫法袁串，只要瀏覽器支持我們的transition屬性概而，那么這種效果就會(huì)自動(dòng)加上去：
//Mozilla內(nèi)核
-moz-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
//Webkit內(nèi)核
-webkit-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
//Opera
-o-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
//W3C 標(biāo)準(zhǔn)
transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
animation的使用
@keyframes 動(dòng)畫名{
from{起始CSS樣式}
to{最終樣式}
}
選擇器{animation:動(dòng)畫名 秒}
～～～～～～～～～～～～～～～～～～～～～～～～～～～
@keyframes 動(dòng)畫名{
0%{ 起始CSS樣式 }
25%{ CSS樣式 }
50%{ CSS樣式 }
75%{ CSS樣式 }
100%{ CSS樣式 }
}
設(shè)置元素css樣式
選擇器{animation:動(dòng)畫名 秒}