css3 transform 属性

transition 与 transform 属性、用法、区别

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

transition: width 2s linear 200ms,background 2s linear 200ms;那个属性需要过渡写那个
/*代表持续时间为1s，延迟时间为2s*/
    transition: 1s 2s;

通过这四个子属性的配合来完成一个完整的过渡效果

transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)

例：transition: width 2s linear 200ms,background 2s linear 200ms;

ease: 开始和结束慢，中间快。相当于cubic-bezier(0.25,0.1,0.25,1)
linear: 匀速。相当于cubic-bezier(0,0,1,1)
ease-in: 开始慢。相当于cubic-bezier(0.42,0,1,1)
ease-out: 结束慢。相当于cubic-bezier(0,0,0.58,1)
ease-in-out: 和ease类似，但比ease幅度大。相当于cubic-bezier(0.42,0,0.58,1)
step-start: 直接位于结束处。相当于steps(1,start)
step-end: 位于开始处经过时间间隔后结束。相当于steps(1,end)

transform:

-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() 不加XY整体缩放 scale(x,y)
rotateX,Y,Z(xyz数值deg) 不加XY整体旋转 
translate(x,y) 位移px X正右负左（从左往右） Y正下负上(从上往下)  translateY()  正到负
skewX,Y(数值deg，数值deg)  斜切 X上下 Y左右
数值为 正 逆时针方向斜切（默认X）

数值为 负 顺时针方向斜切

兼容性解决：

.add_transform{
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%);
}
transition: all 0.3s ease-in;


translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。弹出层向上滚出
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。

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));