transition&transform,CSS中过度和变形的设置

设置样式的过度效果


transition-property: none/all;
transition-duration:2s;运动时间,默认是0秒
transition-delay:0s; 延迟时间默认0秒
transition-timing-function:ease;逐渐变慢(默认)

linear匀速 ease-in加速 ease-out减速 ease-in-out先加速再减速*/

 1,样式 持续时间 延时  可连写多组每个样式之间使用','隔开

.过度的样式 可以同时指定多个 

1,过度的时间 2,过度的样式
transition: 1s width , 2s height , 1s background;

2. 过度的形式
贝塞尔曲线很重要 几乎所有的都能用贝塞尔曲线做出来
网址:http://cubic-bezier.com/#.14,.63,.79,.21

伪类选择器,光标移动到上面时触发,产生动画效果

-------------------------------------------------

transform: 形变属性 

平移:translate

平移:translate 给定坐标, 沿着做标轴移动
第一个参数:x轴坐标 第二个参数:y轴坐标 以自身作为参照

可给 数值或者百分比%

旋转角度  单位是deg  以自身中心作为旋转中心

正数沿着顺时针方向   负数逆时针方向

设置形变参考原点 默认值是center  top  bottom left right

transform: rotateX(45deg);
transform: rotateY(45deg);

scale() 缩放倍数
transform: scale(2.0, 0.5)
大于1表示放大 1以下代表缩小
盒子里的内容也会跟着一起缩放

transform-origin: left;  缩放的原点
transform: scale(0.2, 0.5); 参数XY
transform: scaleX(0.5);  沿着X轴
transform: scaleY(.4);  沿着Y轴

skew() 倾斜
X轴的倾斜:正数逆时针
Y轴的倾斜:正数顺时针

倾斜指的是XY轴的倾斜 
transform-origin: left;  设置倾斜的原点
transform: skew(30deg, 30deg);  参数XY
transform: skewX(30deg); 沿着X轴
transform: skewY(30deg);  沿着Y轴