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

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

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

Answer 3

从复杂的转换字符串中提取键/值对：

使用regex.exec 方法

如果您的正则表达式使用“g”标志，您可以多次使用 exec() 方法来查找同一字符串中的连续匹配项。执行此操作时，搜索会从正则表达式的 lastIndex 属性指定的 str 子字符串开始（test() 也会提前 lastIndex财产）。请注意，搜索不同字符串时，lastIndex 属性不会重置，它将从现有的 lastIndex 处开始搜索。

function parseComplexStyleProperty( str ){
   var regex = /(\w+)\((.+?)\)/g, transform = {}, match;

   while( match = regex.exec(str) )
       transform[match[1]] = transform[match[1]] 
           ? transform[match[1]].concat([match[2]])
           : [match[2]]
  
   return transform
}


/// USAGE: ///////////////////////////////////////

var dummyString = "translateX(-50%) translateX(100px) scale(1.2)",
    transformObj = parseComplexStyleProperty(dummyString);

console.log(transformObj)

注意 - 请注意，这也是一个有效的 CSS 转换值：

translateX(-50%) translateX(100px);

---

更复杂的情况：

function parseTransform(s){ 
  var keys = ['matrix3d', 'matrix', 'perspective', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'rotate', 'translate3d', 'translateX', 'translateY', 'translateZ', 'translate', 'scale3d', 'scaleX', 'scaleY', 'scaleZ', 'scale', 'skewX', 'skewY',  'skew'];

  return (s+'    ').replace(  new RegExp( '\\b' + keys.join('|') + '\\b','gi'), m => '    ' +m)
  .split(')    ').reduce((acc, p) => {
    p = p.trim()

    var name = p.slice(0, p.indexOf('(')),
        value = p.slice(p.indexOf('(') + 1, 999)

    if(!p) return acc
   
    if( acc[name] ) 
      acc[name].push(value)
    else 
      acc[name] = [value]

    return acc
  }, {})
}


console.log(
parseTransform('scale(1.2 0.5) rotate(var(--c1) var(--c2)) translateX(-50%) translateX(100px)')
)

Answer 4

我认为，正如 syockit 所说，迭代样式表是唯一的方法，您可以使用 webkitMatchesSelector 来发现与您的元素匹配的规则：

var theRules = new Array();
var theStylesheet = document.styleSheets;
if (document.styleSheets[0].cssRules)
        theRules = document.styleSheets[0].cssRules
else if (document.styleSheets[0].rules)
        theRules = document.styleSheets[0].rules

var elem = document.getElementById("myDiv");

for (var i=0; i < theRules.length; i++) {
    if (elem.webkitMatchesSelector(theRules[i].selectorText)) {
        var theStyles = theRules[i].style;
        var j = theStyles.cssText.indexOf('-webkit-transform:');
        if (j>-1) {
            var s = theStyles.cssText.substring(j,theStyles.cssText.length).indexOf(';'); 
            document.getElementById("output").innerHTML=theStyles.cssText.substring(j+18,s);
        }
    }
}

这假设标记是这样的，我添加了一些额外的规则和值以确保我提取出正确的值。如果您有多个样式表，那么您需要调整第一部分以迭代所有样式表，并且如果您的 -webkit-transform 出现在多个样式表中，您可能必须处理特殊性一条规则：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Get style</title>
    <style>
    div {
        margin: 2em;
        padding: 2em;
    }
    #myDiv {
        -webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px);
        border: 1px solid;
    }
    </style>
</head>
<body>
    <div id="myDiv">
        Just testing.
    </div>
    <div id="output">
    </div>
</body>
</html>

Answer 5

我今天早上遇到了这个问题。看来 JavaScript 无法读取元素的 style.webkitTransform 属性，除非在元素的 style 属性中显式设置该属性（在 HTML 中内联或通过 JavaScript 程序化）。尽管这听起来很笨拙，但如果您需要 JS 能够读取 CSS 转换属性，那么您最好在 DOM 准备就绪时使用 JavaScript 定义它们的初始值。

例如，使用 jQuery：

$(document).ready(function(){
    $('.transform').css('webkitTransform', 'translateX(0)');
});

从现在开始，您将能够读取元素的转换字符串并解析它以获取所需的值。

Answer 6

这个 来自 Apple Dev Reference 的链接可能会更清楚地说明该主题：

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

Answer 7

由于您只能从计算的样式中获得最终的矩阵值，因此您可能必须检查元素的内联样式或样式表规则。如果 element.style.webkitTransform 没有给您任何信息，您可能会迭代文档的样式表，看看哪一个与您的元素匹配。然后，您可以对 webkitTransform 属性进行正则表达式来获取/设置该值。

Answer 8

你可以使用正则表达式来获取属性值的映射：

如果变量transformstyle包含样式值

  //get all transform declarations
 (transformstyle.match(/([\w]+)\(([^\)]+)\)/g)||[]) 
      //make pairs of prop and value         
     .map(function(it){return it.replace(/\)$/,"").split(/\(/)})
     //convert to key-value map/object         
     .reduce(function(m,it){return m[it[0]]=it[1],m},{})

for：

var transformstyle="-webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px)"

你会得到：

{scale: "1.1", rotateY: "7deg", translateZ: "-1px"}

Answer 9

只是因为我没有看到任何有效的 Javascript 单行解决方案来转换矩阵代码，这是我的。快速而简单：

首先获取矩阵中的所有变换值：

var yourDivsCssValues= window.getComputedStyle(yourDiv, null);
transformValues = testDivCSS.getPropertyValue('transform');

将变换 y 提取为整数：

var transformValueY = parseInt((yourVariable1.replace (/,/g, "")).split(" ")[5]);

将变换 x 提取为整数：

var transformValuetX = parseInt((yourVariable2.replace (/,/g, "")).split(" ")[4]);

访问旋转值相当困难，但如果您愿意，这里有一个很好的指南这样做：
https://css-tricks.com/get-value- of-css-rotation-through-javascript/

Answer 10

如果你想要完整的转换，你确实可以使用getCompulatedStyle(element).transform。

但无论如何，只需使用 DOMMatrix 构造函数：new DOMMatrix(element.style.transform)。你就完成了。