transform 属性

transition 与 transform 属性、用法、区别

transition:1s;(写在目标元素中)

transition:2s width,3s height,5s background; 那个属性需要过渡写那个。

-webkit-transform:rotate(360deg) scale(0.2);两个属性一起写法。

-webkit-transform-origin:right top; /*center left top bottom 围绕的中心点*/

/*alternate倒序 转到偶数为倒*/
/*linear 匀速*/

/*animation-play-state:paused;转态暂停*/

#wrap:hover #list{
animation-play-state:paused;
}  /*鼠标移入暂停滚动*/

-webkit-transform:
scaleX,Y(x,y) 缩放
rotate(数值deg) 旋转
translateX,Y(x,y) 位移px
skewX,Y(数值deg，数值deg)  斜切 X上下 Y左右
数值为 正 逆时针方向斜切（默认X）

数值为 负 顺时针方向斜切

matrix(1,0,0,1,0,0) 默认 标准
matrix(a,b,c,d,x,y)
a:x方向水平增加宽度
b:顺时针转最终y方向变横线(顺时针旋转同时增高数值大于1)
c:逆时针转最终x方向变横线(逆时针旋转同时增宽数值大于1)
d:y方向垂直增加高度
x:x方向位移 + 100距离
y:y方向位移 + 100距离


缩放:
x轴缩放:a = x*a;
y轴缩放:d = y*a;


倾斜:
x轴倾斜: c=Math.tan(xDeg/180*Math.PI);
y轴倾斜: b=Math.tan(yDeg/180*Math.PI);


位移:
x:x+距离
y:y+距离


旋转：
a = Math.cos(deg/180*Math.PI)
b = Math.sin(deg/180*Math.PI)
c = -Math.sin(deg/180*Math.PI)
d = Math.cos(deg/180*Math.PI)  deg 度数

a = d , b = (-)c

    alert(Math.cos(度数/180*Math.PI));