css3之变形处理
一、 使用方法
属性:transform
值:
rotate(30deg度数) //旋转
scale(倍数) //缩放
skew(x角度,y角度) //倾斜
translate(x位移,y位移) //移动
记得不同浏览器内核的一个适配,就是加前缀-webkit-transform:…
二、同一个元素可以同时进行多种变形
一个transform可以有多个变形效果,在后面直接用空格然后添加,如:
transform:rotate(45deg) scale(1.5);
//注意,变化先后顺序不同,结果可能不一样
三、设置变化的基准点
默认基准点是几何中心;
使用transform-origin属性设置,如:
transform-origin:top right;
动画功能:
一、Transitions属性,包含值有
①property //需要改变的属性
②duration //执行时间长度
③timing-function //过度动画的形式,如:linear 线性,速度不变;ease-in 慢到快; ease-out快到慢; ease; ease-in-out
多动画效果同时使用,只需要在transitions的值里面用逗号隔开添加即可,如:
transitions:background-color 1s linear,color 1s linear,width 1s linear;
二、Animations属性,利用关键帧来实现更复杂的动画效果
使用步骤:
①单独定义变化的所有关键帧
@webkit-keyframes donghua{
0%{需要变化的属性:值1;}
25%{需要变化的属性:值2;}
.
.
.
}
②在hover或其他伪类中使用Animation属性
-webkit-animation:donghua 2s linear;