如何在JavaScript中读取单个变换值？

Question

去年Webkit发布的关于3D变换的博客文章解释了可以在-webkit-transform属性中使用的各种变换"函数".例如:

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

我的问题:你如何在JavaScript中访问个别值？当你读取元素的webkitTransform属性时,你只需要一个包含16个值的matrix3d()函数,就像这样......

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和本机Javascript RegExp函数之外,我没有使用其他库.因此,这应该普遍适用于跨浏览器和应用程序.

Answer 2

老而有趣的问题，之前没有任何回应试图回答它。

不幸的是，对于一般情况没有双线解决方案，并且我们不知道需要逆向工程哪些变换步骤（旋转、平移等）；越少越容易。

在最近基于 webkit 的浏览器中，可以简单地查询先前分配的属性：

var element = document.querySelector('div.slipping');
element.style.webkitTransform 
  -> "translate(-464px, 0px)"

我们继续假设需要使用计算样式。例如，如果元素位于 CSS 过渡或 CSS 动画的中间，即当前变换不是直接设置的变换，就会出现这种需要。

getComputedStyle 返回的矩阵描述符字符串确实可以通过正则表达式进行解析，但并非上述所有版本都是可靠的，而且它们太不透明了。分解字符串的一种直接方法是这样的，除非它处于非常紧密的循环中以保证单遍正则表达式：

var matrixString = window.getComputedStyle(element).webkitTransform;
var matrix = matrixString
             .split('(')[1]
             .split(')')[0]
             .split(',')
             .map(parseFloat);

但另一种方法是简单地使用它，这之前没有提到过：

var cssMatrix = new WebKitCSSMatrix(matrixString);

后一种方法的好处是您还可以获得 4x4 矩阵，这是仿射变换的标准表示形式，缺点是它当然是 WebKit 特定的。如果您继续使用问题中的六个值的元组，它是在 CSS 标准的这一部分中定义的。

然后需要对变换（例如旋转）进行逆向工程。CSS 可以直接支持许多简单的变换，例如平移、缩放、旋转、倾斜和透视。如果仅应用其中之一，则只需恢复计算变换矩阵的过程即可。

另一种方法是在 JS 中查找或翻译可以为您执行此操作的代码，例如，同一文档或CSS 标准的第 7.1 节包含此类带注释的算法。好处是，非矩阵方法能够在一些限制下返回“原子”变换，即使应用了多个变换（平移、旋转等）。由于不可能保证一般情况下转换步骤的逆向工程成功，因此考虑可能应用哪些类型的转换以及是否避免了退化或其他麻烦的情况是有用的。即，您需要构建您认为适合您的问题的解决方案。

具体来说，所有 2D CSS 变换的矩阵版本也记录在此处，位于 CSS 2D 变换向量中的六个值的含义下方。

另一个需要注意的是，还有其他因素会影响几何操作方面的视觉结果，例如，变换原点。

Answer 3

Apple Dev Reference 中的此链接可能会更详细地说明该主题：

webkitTransform 属性是转换操作列表的字符串表示形式。通常这个列表包含单个矩阵变换操作。对于 3D 变换，该值为“matrix3d(...)”，括号内为 4x4 齐次矩阵的 16 个值。对于 2D 变换，该值是包含 6 个向量值的“matrix(...)”字符串。