transform總結

看風景就發表於2017-09-14
ORM

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

相關文章