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 x
    var y = matrix[13] || matrix[5]; //translate y
    if(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