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

轉載于:https://www.cnblogs.com/mengff/p/7520609.html

總結

以上是生活随笔為你收集整理的transform总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。