一酣藻、變形

transform：可以對(duì)元素對(duì)象進(jìn)行旋轉(zhuǎn)rotate、縮放scale鳍置、移動(dòng)translate、傾斜skew送淆、矩陣變形matrix税产。
示例：

transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);
/*矩陣變形*/
matrix(<number>,<number>,<number>,<number>,<number>,<number>);
/*透視*/
perspective(length);

transition：過度屬性

transition：過度效果的css屬性名 過度效果時(shí)長 速度效果的速度曲線 過度效果開始時(shí)間薇搁；

transition: property duration timing-function delay;/*示例*/transition:1s ease all;-webkit-tansition:1s ease all;-moz-transition:1s ease all;-o-transition:1s ease all;

rotate()：二維空間旋轉(zhuǎn)元素欧漱。

若元素設(shè)置了perspective值蹬叭，可用rotate3d()實(shí)現(xiàn)三維空間內(nèi)旋轉(zhuǎn)核行。

rotateX(angele)/*相當(dāng)于rotate3d(1,0,0,angle)指定在三維空間內(nèi)的X軸旋轉(zhuǎn)*/rotateY(angele)/*相當(dāng)于rotate3d(0,1,0,angle)指定在三維空間內(nèi)的Y軸旋轉(zhuǎn)*/rotateZ(angele)/*相當(dāng)于rotate3d(0,0,1,angle)指定在三維空間內(nèi)的Z軸旋轉(zhuǎn)*/

scale()

scaleX(<number>)/*只在X軸（水平方向）縮放元素*/scaleY(<number>)/*只在Y軸（垂直方向）縮放*/scaleZ(<number>)/*只在Z軸縮放稠集，前提：元素設(shè)定透視值*/

translate([,])：移動(dòng),是位移量名惩。

translateX(<translation-value>);/*只在X軸（水平方向）移動(dòng)*/translateY(<translation-value>);/*只在Y軸（垂直方向）移動(dòng)*/translateZ(<translation-value>);/*只在Z軸移動(dòng)续捂，前提：元素設(shè)置透視值*/

skew()：傾斜

skewX(<angle>);/*只在X軸（水平）傾斜*/skewY(<angle>);/*只在Y軸（垂直）傾斜*/

matrix(a,c,e,b,d,f)：矩陣變形眷蜈，c谒出、e的值用正弦或余弦值表示隅俘。

a：表示scaleX(); X軸縮放
c：skewY(); Y軸傾斜
e：skewX(); X軸傾斜
b：scaleY(); Y軸縮放
d：translateX() X軸移動(dòng)
f：translateY() Y軸移動(dòng)

transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);

perspective()：透視

.wrap{
    perspective:1000px; 
}
.wrap .child{
    transform:perspective(1000px);
}

二、過渡

transition-property：過度的屬性

transition-property:all;/*針對(duì)所有元素都有過度效果*/transition-property:none;/*沒有元素有過度效果*/transition-property:ident;/*指定css屬性有過度效果笤喳，例如width*/

transition-duration：過度時(shí)間
transition-delay：延遲時(shí)間为居，為負(fù)數(shù)時(shí)，過度動(dòng)作會(huì)從該時(shí)間點(diǎn)開始顯示杀狡，之前的動(dòng)作會(huì)被截?cái)唷?br> transition-timing-function：過度效果蒙畴，默認(rèn)ease。

transition-timing-function:ease;
/*緩解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函數(shù)膳凝，既立方貝塞爾

*/transition-timing-function:linear;/*
線性效果碑隆，等同于cubic-bezier(0.0,0.0,1.0,1.0)函數(shù)

*/transition-timing-function:ease-in;/*
漸顯效果，等同于cubic-bezier(0.42,0,1.0,1.0)函數(shù)

*/transition-timing-function:ease-out;/*
漸隱效果蹬音，等同于cubic-bezier(0,0,0.58,1.0)函數(shù)

*/transition-timing-function:ease-in-out;/*
漸顯漸隱效果上煤，等同于cubic-bezier(0.42,0,0.58,1.0)函數(shù)

*/transition-timing-function:cubic-bezier;/*
特殊的立方貝塞爾曲線效果*/

三、動(dòng)畫

animation-name：動(dòng)畫名稱祟绊，必須與規(guī)則@keyframes配合使用楼入，因?yàn)閯?dòng)畫名稱由@keyframes定義，如果提供多個(gè)屬性值用逗號(hào)隔開牧抽。

@keyframes相當(dāng)于一個(gè)命名空間嘉熊，后面跟一個(gè)名詞，如果在class中的animation-name定義了與之對(duì)應(yīng)的name就可以執(zhí)行動(dòng)畫扬舒。定義動(dòng)畫時(shí)可直接使用關(guān)鍵字from和to阐肤，從一種狀態(tài)過度到另一種狀態(tài)。

.animation_name{
    left:0;
    top:100px;
    position: absolute;
    -webkit-animation: 0.5s 0.5s ease infinite alternate;
    -moz-animation: 0.5s 0.5s ease infinite alternate;
    -webkit-animation-name:demo;    -moz-animation-name:demo;
}
@-webkit-keyframes demo{
    from{left:0;}
    to{left:400px;}
}
@-webkit-keyframes demo1{
    0%{left:0;}
    50%{left:200px;}
    100%{left:400px;}
}

animation-duration：動(dòng)畫時(shí)間

animation-timing-function：播放方式讲坎，取值如下：

ease：緩解效果孕惜，等同于cubic-bezier(0.25,0.1,0.25,1.0)函數(shù)，既立方貝塞爾晨炕。
linear：線性效果
ease-in：漸顯效果
ease-out：漸隱效果
ease-in-out：漸顯漸隱效果
step-start：馬上跳轉(zhuǎn)到動(dòng)畫結(jié)束狀態(tài)
step-end：保持動(dòng)畫開始狀態(tài)衫画，到動(dòng)畫執(zhí)行時(shí)間結(jié)束，馬上跳轉(zhuǎn)到動(dòng)畫結(jié)束狀態(tài)
step([,[start | end]]?)：第一個(gè)參數(shù)number為指定的間隔數(shù)瓮栗，即把動(dòng)畫分為n步階段性顯示削罩，第二個(gè)參數(shù)默認(rèn)為end，設(shè)置最后一步狀態(tài)费奸，start為結(jié)束時(shí)的狀態(tài)弥激，end為開始時(shí)的狀態(tài)，若設(shè)置與animation-fill-mode的效果沖突愿阐，以animation-fill-mode的設(shè)置為動(dòng)畫結(jié)束狀態(tài)微服。
cubic-bezier(,,,)：特殊的立方賽貝爾曲線效果

animation-delay：開始播放時(shí)間

animation-iteration-count：播放次數(shù)，取值為infinite時(shí)表示無限循環(huán)播放

animation-direction：播放方向缨历，取值為：

normal：正常方向
reverse：動(dòng)畫反向運(yùn)行以蕴，方向始終與normal相仿
alternate：動(dòng)畫會(huì)循環(huán)正反交替運(yùn)動(dòng)

animation-fill-mode：播放后的狀態(tài)，取值：

none：默認(rèn)值辛孵，不設(shè)置
forwards：結(jié)束后保持動(dòng)畫結(jié)束的狀態(tài)
backwards：結(jié)束后返回動(dòng)畫開始時(shí)狀態(tài)
both：結(jié)束后可遵循forwards和backwards兩個(gè)規(guī)則
animation-play-state：檢索或設(shè)置對(duì)象動(dòng)畫的狀態(tài)舒裤，取值：
running：默認(rèn)，運(yùn)動(dòng)
paused：暫停

四觉吭、關(guān)聯(lián)屬性

transform-origin：變形原點(diǎn)腾供，transform的參照點(diǎn)，默認(rèn)為元素的中心點(diǎn)。有兩個(gè)參數(shù)伴鳖，參數(shù)一為橫坐標(biāo)节值，參數(shù)二為縱坐標(biāo)。

percentage：用百分比指定坐標(biāo)值榜聂，可負(fù)
length：用長度指定坐標(biāo)值搞疗，可負(fù)
left center right：水平方向取值
top center bottom：垂直方向取值

perspective-prigin：透視原點(diǎn)，定義在X軸和Y軸的3D元素须肆，允許改變3D元素的底部位置匿乃，定義該屬性時(shí)，它是一個(gè)元素的子元素豌汇，透視圖幢炸，而不是元素本身。
注意：使用該屬性必須和perspective屬性一起用拒贱，只影響3D轉(zhuǎn)換的元素宛徊。
取值：percentage、length逻澳、left闸天、center、right斜做、top苞氮、center、bottom

backface-visibility：隱藏內(nèi)容的背面瓤逼，默認(rèn)情況下背面可見笼吟，反轉(zhuǎn)后變換的內(nèi)容仍然可見，當(dāng)backface-visibility設(shè)置hidden時(shí)抛姑，旋轉(zhuǎn)后內(nèi)容將隱藏，旋轉(zhuǎn)后正面將不再可見艳狐。
取值：visible定硝、hidden
transform-style：3D呈現(xiàn)，設(shè)置內(nèi)嵌的元素在3D空間如何呈現(xiàn)毫目，有兩個(gè)值：
flat：所有子元素在2D平面呈現(xiàn)
preserve-3d：保留3D空間