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

巴特西

transform总结

最新文章

热门文章