javascript - 如何读取/解析 JavaScript 中的单个转换样式值？

Question

Webkit 去年的博文 3D transforms解释了可以在 -webkit-transform 属性中使用的各种转换“函数”。例如:

#myDiv {
  -webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px);
}

我的问题:如何在 JavaScript 中访问单个值？当你读取元素的 webkitTransform 属性时，你只会得到一个 matrix3d() 函数，其中有 16 个值，就像这样......

matrix3d(0.958684, 0.000000, .....)

有没有办法只读取单个变换对象的值，比如 rotateY()？或者我必须从 matrix3d() 字符串中读取它，如何读取？

Answer 1

// Suppose the transformed element is called "cover".
var element = document.getElementById('cover');
computedStyle = window.getComputedStyle(element, null); // "null" means this is not a pesudo style.
// You can retrieve the CSS3 matrix string by the following method.
var matrix = computedStyle.getPropertyValue('transform')
    || computedStyle.getPropertyValue('-moz-transform')
    || computedStyle.getPropertyValue('-webkit-transform')
    || computedStyle.getPropertyValue('-ms-transform')
    || computedStyle.getPropertyValue('-o-transform');

// Parse this string to obtain different attributes of the matrix.
// This regexp matches anything looks like this: anything(1, 2, 3, 4, 5, 6);
// Hence it matches both matrix strings:
// 2d: matrix(1,2,3,4,5,6)
// 3d: matrix3d(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16);
var matrixPattern = /^\w*\((((\d+)|(\d*\.\d+)),\s*)*((\d+)|(\d*\.\d+))\)/i;
var matrixValue = [];
if (matrixPattern.test(matrix)) { // When it satisfy the pattern.
    var matrixCopy = matrix.replace(/^\w*\(/, '').replace(')', '');
    console.log(matrixCopy);
    matrixValue = matrixCopy.split(/\s*,\s*/);
}

希望对您有所帮助!请注意，除了纯 DOM API 和 native Javascript RegExp 函数外，我没有使用其他库。因此，这应该适用于跨浏览器和应用程序。