transform：可以對元素物件進行旋轉rotate、縮放scale、移動translate、傾斜skew、矩陣變形matrix。 示例：
transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);
/*矩陣變形*/
matrix(,,,,,);
/*透視*/
perspective(length);
transition：過度效果的css屬性名 過度效果時長 速度效果的速度曲線 過度效果開始時間；
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;
若元素設定了perspective值，可用rotate3d()實現三維空間內旋轉。
rotatex(angele)/*相當於rotate3d(1,0,0,angle)指定在三維空間內的x軸旋轉*/
rotatey(angele)/*相當於rotate3d(0,1,0,angle)指定在三維空間內的y軸旋轉*/
rotatez(angele)/*相當於rotate3d(0,0,1,angle)指定在三維空間內的z軸旋轉*/
scalex()/*只在x軸（水平方向）縮放元素*/
scaley()/*只在y軸（垂直方向）縮放*/
scalez()/*只在z軸縮放，前提：元素設定透視值*/
translatex();/*只在x軸（水平方向）移動*/
translatey();/*只在y軸（垂直方向）移動*/
translatez();/*只在z軸移動，前提：元素設定透視值*/
skewx();/*只在x軸（水平）傾斜*/
skewy();/*只在y軸（垂直）傾斜*/
a：表示scalex(); x軸縮放 c：skewy(); y軸傾斜 e：skewx(); x軸傾斜 b：scaley(); y軸縮放 d：translatex() x軸移動 f：translatey() y軸移動
transform:matrix(,,,,,);
.wrap
.wrap .child
transition-property：過度的屬性
transition-property:all;/*針對所有元素都有過度效果*/
transition-property:none;/*沒有元素有過度效果*/
transition-property:ident;/*指定css
屬性有過度效果，例如width*/
transition-timing-function:ease;/*緩解效果，等同於cubic-bezier(0.25,0.1,0.25,1.0)函式
，既立方貝塞爾*/
transition-timing-function:linear;/*線性效果，等同於cubic-bezier(0.0,0.0,1.0,1.0)函式
*/transition-timing-function:ease-in;/*漸顯效果，等同於cubic-bezier(0.42,0,1.0,1.0)函式*/
transition-timing-function:ease-out;/*漸隱效果，等同於cubic-bezier(0,0,0.58,1.0)函式*/
transition-timing-function:ease-in-out;/*漸顯漸隱效果，等同於cubic-bezier(0.42,0,0.58,1.0)函式*/
transition-timing-function:cubic-bezier;/*特殊的立方貝塞爾曲線效果*/
animation-name：動畫名稱，必須與規則@keyframes配合使用，因為動畫名稱由@keyframes定義，如果提供多個屬性值用逗號隔開。
@keyframes相當於乙個命名空間，後面跟乙個名詞，如果在class中的animation-name定義了與之對應的name就可以執行動畫。定義動畫時可直接使用關鍵字from和to，從一種狀態過度到另一種狀態。
.animation_name
@-webkit-keyframes demo
to}@-webkit-keyframes demo1
50%100%
}
ease：緩解效果，等同於cubic-bezier(0.25,0.1,0.25,1.0)函式，既立方貝塞爾。 linear：線性效果 ease-in：漸顯效果 ease-out：漸隱效果 ease-in-out：漸顯漸隱效果 step-start：馬上跳轉到動畫結束狀態 step-end：保持動畫開始狀態，到動畫執行時間結束，馬上跳轉到動畫結束狀態 step([,[start | end]]?)：第乙個引數number為指定的間隔數，即把動畫分為n步階段性顯示，第二個引數預設為end，設定最後一步狀態，start為結束時的狀態，end為開始時的狀態，若設定與animation-fill-mode的效果衝突，以animation-fill-mode的設定為動畫結束狀態。 cubic-bezier(,,,)：特殊的立方賽貝爾曲線效果
normal：正常方向 reverse：動畫反向執行，方向始終與normal相仿 alternate：動畫會迴圈正反交替運動
none：預設值，不設定 forwards：結束後保持動畫結束的狀態 backwards：結束後返回動畫開始時狀態 both：結束後可遵循forwards和backwards兩個規則 animation-play-state：檢索或設定物件動畫的狀態，取值： running：預設，運動 paused：暫停
資源搜尋**大全
廣州vi設計公司
transform-origin：變形原點，transform的參照點，預設為元素的中心點。有兩個引數，引數一為橫座標，引數二為縱座標。
percentage：用百分比指定座標值，可負 length：用長度指定座標值，可負 left center right：水平方向取值 top center bottom：垂直方向取值
perspective-prigin：透視原點，定義在x軸和y軸的3d元素，允許改變3d元素的底部位置，定義該屬性時，它是乙個元素的子元素，透檢視，而不是元素本身。 注意：使用該屬性必須和perspective屬性一起用，只影響3d轉換的元素。 取值：percentage、length、left、center、right、top、center、bottom
backface-visibility：隱藏內容的背面，預設情況下背面可見，反轉後變換的內容仍然可見，當backface-visibility設定hidden時，旋轉後內容將隱藏，旋轉後正面將不再可見。 取值：visible、hidden transform-style：3d呈現，設定內嵌的元素在3d空間如何呈現，有兩個值： flat：所有子元素在2d平面呈現 preserve-3d：保留3d空間
CSS3動畫 過渡
css3過渡是元素從一種樣式轉換成另一種樣式。使用transition屬性 transition property 過渡的名稱 transition duration 過渡效果花費的時間 transition timing function 過渡效果的時間曲線 transition delay 過渡...
CSS3 過渡 動畫
css3 過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，必須規定兩項內容 應用於寬度屬性的過渡效果，時長為 2 秒 div 注釋 如果時長未規定，則不會有過渡效果，因為預設值是 0。效果開始於指定的 css 屬性改變值時。css 屬性改變的典型時間是滑鼠指標位於元素上時 規定當滑鼠指標懸...
CSS3筆記 3 過渡效果 動畫 變形
語法 transition duration time 語法 transition property none all property 語法 transition delay time 語法 transition timing function linear ease ease in ease o...