一、transform
語法：none|<transform-function>[<transform-function>]* 初始值是none。
transform-function函數取值：
matrix():定義矩陣變換。
translate():移動元素對象。
scale():縮放元素對象。
rotate():旋轉元素對象。
skew():傾斜元素對象。
例如(兼容瀏覽器)：
1.rotate()函數：transform: rotate(-90deg);-o-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
2.scale()函數：transform: scale(2);-o-transform: scale(2);-moz-transform: scale(2);-webkit-transform: scale(2);
當為scale傳遞不同的參數值時，縮放動畫效果是不同的。scale(1,2)意思是寬度保持不變，高度變為原來的2倍。scale(1,-2)意思是寬度保持不變，高度變為原來的2倍且旋轉180度。
3.translate()函數：transform: translate(4px, 6px);-o-transform: translate(4px, 6px);-moz-transform:translate(4px, 6px);-webkit-transform: translate(4px, 6px);參數可以是負的像素值。
4.skew()函數：transform: skew(30deg, -20deg);-o-transform: skew(30deg, -20deg);-moz-transform: skew(30deg, -20deg);-webkit-transform: skew(30deg, -20deg);會改變元素的形狀，而rotate函數不會改變元素的形狀。
5.matrix()函數：transform: matrix(3,2,3,5,0,0);-o-transform: matrix(3,2,3,5,0,0);-moz-transform: matrix(3,2,3,5,0,0);-webkit-transform: matrix(3,2,3,5,0,0);參數為6個數值。
二、transform-origin
CSS變形的原點，默認是對象的中心點。transform-origin接受兩個參數，他們可以是百分比、em、px等具體的值，也可以是left、right、center、top、middle、bottom等關鍵字。
例如：
transform-origin: top right;-o-transform-origin: top right;-moz-transform-origin: top right;-webkit-transform-origin: top right;
transform-origin: 0 0;-o-transform-origin: 0 0;-moz-transform-origin: 0 0;-webkit-transform-origin: 0 0;
transform-origin: 0 100%;-o-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-webkit-transform-origin: 0 100%;
transform-origin: 50% 100%;-o-transform-origin: 50% 100%;-moz-transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%;
三、transition--過渡
1.transition-property：定義轉換動畫的CSS屬性名稱。可以是none|all|CSS屬性列表。
例如：
transition-property:background-color;-o-transition-property:background-color;-moz-transition-property:background-color;-webkit-transition-property:background-color;
2.transition-duration：定義轉換動畫的時間長度。
例如：
transition-duration: 3s;-o-transition-duration: 3s;-moz-transition-duration: 3s;-webkit-transition-duration: 3s;
3.transition-delay：定義過渡動畫的延遲時間。
例如：
transition-delay: 3s;-o-transition-delay: 3s;-moz-transition-delay: 3s;-webkit-transition-delay: 3s;
4.transition-timing-function：定義轉換動畫的效果。
取值可以是：
ease：緩解效果。
ease-in：漸顯效果。
ease-out：漸隱效果。
ease-in-out：漸顯漸隱效果。
linear：線性效果。
cubic-bezier：特殊的立方貝塞爾曲線效果。cubic-bezier(0.3, 0, 0.5, 1.0)。
例如：
transition-timing-function: linear; -o-transition-timing-function: linear;-moz-transition-timing-function: linear;-webkit-transition-timing-function: linear;
四、animation
1.animation-name：動畫名字。
2.animation-duration：動畫時間。
3.animation-timing-function：動畫播放方式。
4.animation-delay：動畫開始播放時間。
5.animation-iteration-count：播放次數。infinite表示無限次。。
6.animation-direction：動畫播放方向。normal--動畫的每次循環都向前 alternate--第偶數次向前，奇數次向後。
例如：
div {
-webkit-transform-style: preserve-3d;
-webkit-animation-name: ani;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
/* 下面調用動畫 */
@-webkit-keyframes ani {
0% {
-webkit-transform: rotateX(0deg);
}
25% {
-webkit-transform: rotateX(180deg);
}
50% {
-webkit-transform: rotateX(360deg);
}
75% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(360deg);
}
}
五、transform-style
兩個取值：preserve-3d：表示繪製的場景為3D。flat：子元素不參與3D轉換。