transform总结

1. 用jquery的css方法获取transform得到的是矩阵matrix,不利于获取translate的值，

优先使用dom.style.webKitTransform进行transform的读写

2. 从transform中读取translate的值方法

//jquery版本
function fGetTranslate($obj,type){var transformMatrix = obj.css("-webkit-transform") ||obj.css("-moz-transform")    ||obj.css("-ms-transform")     ||obj.css("-o-transform")      ||obj.css("transform");var matrix = transformMatrix.replace(/[^0-9-.,]/g, '').split(',');var x = matrix[12] || matrix[4]; //translate xvar y = matrix[13] || matrix[5]; //translate yif(type == 'x'){return x;}else if(type == 'y'){return y;}   return '';
}
//dom版本
function fGetTranslate(obj,type){var transform = obj.style.webkitTransform || obj.style.transform;var aTrans = transform.replace(/[^0-9-.,]/g, '').split(','),res = '';switch(type){case 'x':res = parseInt(aTrans[0]);break;case 'y':res = parseInt(aTrans[1]);break;case 'z':res = parseInt(aTrans[2]);break;default:break;} return res || '';
}

 3.tansform的效果会按照层级进行叠加，在父元素上的动画会叠加到子元素上，子元素上的多个动画也可以拆分为

多层元素的多个动画

<div style="transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)">div>

其变换结果等效于：

<div style="transform:translate(-10px,-20px)"><div style="transform:scale(2)"><div style="transform:rotate(45deg)"><div style="transform:translate(5px,10px)">div>div>div>
div>

4.transform动画的逆转,必须将父元素的transform值倒过来写，值改为负值

<div style="transform:rotate(30deg) skew(45deg)"><div style="transform:skew(-45deg) rotate(-30deg)">div>
div>

5.transform-origin与translate的等价性

transformation matrix是这样计算规则：

[1] 从一个单位矩阵（identity matrix）开始

[2] 根据transform-origin的x、y、z坐标值，进行平移（translate）

[3] 从左向右依次对transform里的变换函数执行乘法

[4] 根据transform-origin的x、y、z坐标值，进行反向平移

transform-origin是使用translate进行两次方向相反的平移，transform-origin是translate的语法糖。

.avatar{ transform: rotate(30deg);transform-origin: 200px 300px;
}

等效于：

.avatar{ transform: translate(200px, 300px) rotate(30deg) translate(-200px, -300px);transform-origin: 0 0;
}

6.transform的matrix的含义

transform: matrix(a,b,c,d,e,f)

e和f 代表着偏移量translate，x和y轴

a和d 代表着缩放比例scale,x 和y轴

b和c 代表着斜切skew（具体参数和角度关系为, b-->tanθ y轴 c-->tanθ x轴 ,我们具体操作的时候还是要使用小数的）

abcd 四个参数代表着旋转，旋转 = 缩放 + 斜切(具体关系待查)

 

 

参考：https://segmentfault.com/a/1190000007421401

　　   https://segmentfault.com/a/1190000010688390?_ea=2553323