CSS 变形+过渡

361 阅读1分钟
变形transform:
transform:scale(2); 

(变形放大 放大两倍 小数缩小 负数上下左右颠倒 )

transform:scale(.5);

 ( 缩小0.5倍)

transform:scale(-.5);

transform:rotate(30deg

(旋转 deg表示旋转角度 正值顺时针旋转 负值逆时针) (负数基于原点互换效果)

transform:skew(x,y); 

(变形 deg )

transform:translate(x,y) 

(单位px 第一个x轴平移距离 第二个y轴平移距离 用逗号隔离)

transform:translateX(50px

(只平移X轴)

transform:translateY(50px

 (只平移Y轴)

过渡 transition:
transitiontransform  3s  linear 1s;

 (transition:被改变的属性3s表示过渡时间 运行的速度曲线 1s表示1秒后执行效果)

transitionall  3s

(all表示所有)