使用jquery获取元素的-webkit-transform的值

Question

我正在使用新的酷css3方法来操作div,这样做的转换:

$("#thediv").css("-webkit-transform","translate(-770px, 0px)");

后来在脚本中我想要获得变换的值,如下所示:

$("#thediv").css("-webkit-transform");

它返回一个这样的矩阵:matrix(1,0,0,1,-770,0)

我无法弄清楚的是如何得到这个矩阵的第5个值(-770)......

有什么建议？谢谢!

Answer 1

你的矩阵是一个4x4变换矩阵:

-770对应于v _x.要提取它,构造一个WebkitCSSMatrix对象:

var style = window.getComputedStyle($('#thediv').get(0));  // Need the DOM object
var matrix = new WebKitCSSMatrix(style.webkitTransform);

console.log(matrix.m41);  // -770

Answer 2

您可以将字符串拆分为数组并像往常一样获得所需的值.这是一个辅助功能,可以完成拆分.

function matrixToArray(str) {
  return str.match(/\d+/g);
}

更新

要保留小数: rgba(0, 0, 0, 0.5)

和否定: matrix(1, 0, 0, 1, -770, 0)

function matrixToArray(str) {
  return str.split('(')[1].split(')')[0].split(',');
}

UPDATE2

RegExp 基于解决方案,保留十进制和负数:

function matrixToArray(str) {
  return str.match(/(-?[0-9\.]+)/g);
}

matrixToArray('rgba(0, 0, 0, 0.5)'); // => ['0', '0', '0', '0.5']
matrixToArray('matrix(1, 0, 0, 1, -770, 0)'); // => ['1', '0', '0', '1', '-770', '0']