H5 变形(简单的运动)

变形(简单的运动)

之前js的运动：每次位置的改变都会使页面发生重排，重绘

变形：

变形，只是视觉上物体发生了改变，真正没有发生改变，不会发生重排。

只能作用于块和行内块，行内元素不行

transform:

rotate(度数)  旋转  可以写负值

默认是绕Z轴旋转

rotateX(40deg)

rotateY(40deg)

scale（X,Y）  缩放  数值比例 倍数  可以写负数

scale(n)  如果一个值X，Y同时缩放

scaleY()

scaleX()

translate(X,Y) 平移 px单位

translate(X)  只有一个值的话，只是X轴平移

translateX(X)  只有一个值的话，只是X轴平移

translateY(X)  只有一个值的话，只是X轴平移

skew（X,Y）倾斜 倾斜度

skew(30deg)  拿着左上和右下两个角横方向扯

skewX(30deg)  拿着左上和右下两个角横方向扯

transform:translate(X,Y) rotate(度数)

注：先写的后执行，后写的先执行

基础运动

transition: 时间 要变化的样式 运动形式 延迟时间;

transition-duration: 1s;  ms 0.5s==.5s

transition-property: all;

transition-timing-function:ease; ease-in ease-out linear

transition-delay: 1s;