web前端 部分总结：CSS转换

1.变换（Transform）

1.矩阵变换：matrix()

            含六值参数值：a,b,c,d,e,f 
-moz-transform:表示火狐内核
-webkit-transform:表示chrome,safari
-ms-transform:表示IE浏览器

.test .matrix {
				-moz-transform: matrix(0, 1, 1, 1, 10px, 10px);
				-webkit-transform: matrix(0, 1, 1, 1, 10, 10);
				-o-transform: matrix(0, 1, 1, 1, 10, 10);
				-ms-transform: matrix(0, 1, 1, 1, 10, 10);
				transform: matrix(0, 1, 1, 1, 10, 10);
			}

2.平移：translate(), translateX(), translateY()

translate(<length>[, <length>])： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 
translateX(<length>)： 指定对象X轴（水平方向）的平移 
translateY(<length>)： 指定对象Y轴（垂直方向）的平移

transform: translate(10px, 10px);

3.旋转：rotate()

rotate(<angle>)： 指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义
 

transform: rotate(-5deg);//参数为负值：逆时针旋转
transform: rotate(5deg);//参数为正值：顺时针旋转

4.缩放：scale()

第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值 
scaleX(<number>)： 指定对象X轴的（水平方向）缩放 
scaleY(<number>)： 指定对象Y轴的（垂直方向）缩放 

transform: scale(1.2);
transform: scale(.8);

5.扭曲：skew()

skew(<angle> [, <angle>])： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 
skewX(<angle>)： 指定对象X轴的（水平方向）扭曲 
skewY(<angle>)： 指定对象Y轴的（垂直方向）扭曲 

transform: skew(-5deg, -5deg);

2.过渡效果(Transition)

[ transition-property ]： 检索或设置对象中的参与过渡的属性 
[ transition-duration ]： 检索或设置对象过渡的持续时间 
[ transition-timing-function ]： 检索或设置对象中过渡的动画类型 
[ transition-delay ]： 检索或设置对象延迟过渡的时间 

transition-property:border-color, background-color, color;
transition-duration:.5s, .5s, .5s;
transition-timing-function:ease-in, ease-in, ease-in;
transition-delay:.1s, .1s, .1s;

3.动画（Animation）

关键帧的定义：keyframes 标识符

动画的调用：Animation

//例如：
@keyframes animations3 {
				0% {//注意：动画执行的百分比时间点0%不能简写为0！
					transform: translate(160px);
					opacity: 0;
				}

				50% {
					transform: translate(130px);
					opacity: 1;
				}

				70% {
					transform: translate(125px);
					opacity: 1;
				}

				100% {
					transform: translate(100px);
					opacity: 0;
				}
			}

1.animation:复合属性。检索或设置对象所应用的动画特效。
            animation:animation 2s ease-out;

2.animation-direction:检索或设置对象动画在循环中是否反向运动 
            normal： 正常方向 
            alternate： 正常与反向交替 

3.animation-duration：设置对象动画的持续时间 

4.animation-play-state：设置对象动画的状态
            running： 运动 
            paused： 暂停 

小白也有在努力！