如何用jQuery选择CSS3矩阵变换的子属性答案

【问题标题】：How to select the sub attribute of CSS3 matrix transform with jQuery如何用jQuery选择CSS3矩阵变换的子属性
【发布时间】：2016-05-28 06:51:49
【问题描述】：

我的.test 类如下所示：

.test {
    transform-style: preserve-3d;
    width: 460px;
    height: 738px;
    transform: translate3d(0px, 0px, 480.89px)
    matrix3d(-0.959423, 0.0701992, -0.273093, 0, 0, -0.968514, -0.248959, 0, 0.281971, 0.238857, -0.929215, 0, 0, 0, 0, 1)
    translate3d(230px, 369px, 0px);
}

由于matrix3d 是动态的，我正在尝试侦听matrix3d 的第三个 数组成员的变化并对其运行条件if 语句。如何做到这一点？

【问题讨论】：

你的意思是你需要这部分 - 0.281971, 0.238857, -0.929215, 0 从值？
请告诉我如何收集所有以及如何收集每个，我需要实现一个 IF 函数，如果它们大于或小于我决定的数字，我该怎么做去做。除了拆分还有其他选择吗？我需要整个浮点数，而不是 0、1 和 -1。
糟糕，在发布答案之前，我没有看到对您评论的编辑。拆分有什么问题？它将给出完整的值（而不仅仅是 0 或 1）。检查我的答案，如果没有帮助，请告诉我。

标签： javascript jquery css transform css-transforms

【解决方案1】：

您可以使用getComputedStyle 获取transform 属性的值，然后将其拆分（或使用正则表达式，随您的喜好）以获取单个值，如下面的 sn-p。

var el = document.querySelector('.test'),
  op = document.querySelector('output'),
  btn = document.querySelector('.change'),
  oldparams, newparams;

window.onload = function() {

  /* get matrix on load */
  oldparams = getMatrix();
  op.innerHTML += 'Original Matrix Row 3: ' + oldparams[8] + ',' + oldparams[9] + ',' + oldparams[10] + ',' + oldparams[11]; /* since array is 0 based, 8 - 11 is the 3rd row. */

  /* on click of button, change matrix and get the changed value */
  btn.addEventListener('click', function() {
    el.style.transform = 'translate3d(0px, 0px, 480.89px) matrix3d(-0.959423, 0.0701992, -0.273093, 0, 0, -0.968514, -0.248959, 0, 0.383571, 0.578857, -0.639215, 0, 0, 0, 0, 1) translate3d(230px, 369px, 0px)';
    newparams = getMatrix();
    op.innerHTML += '<br><br> New Matrix Row 3: ' + newparams[8] + ', ' + newparams[9] + ', ' + newparams[10] + ', ' + newparams[11]; /* since array is 0 based, 8 - 11 is the 3rd row. */
  });
}

function getMatrix() {
  var matrix = window.getComputedStyle(el).transform;
  /*op.innerHTML = 'Matrix Transform is:' + matrix; */

  var params = matrix.split('(')[1].split(')')[0].split(',');
  return params;
}

.test {
  transform-style: preserve-3d;
  width: 460px;
  height: 738px;
  transform: translate3d(0px, 0px, 480.89px) matrix3d(-0.959423, 0.0701992, -0.273093, 0, 0, -0.968514, -0.248959, 0, 0.281971, 0.238857, -0.929215, 0, 0, 0, 0, 1) translate3d(230px, 369px, 0px);
}

<h2>Output</h2>
<output></output>
<button class='change'>Change Matrix</button>
<div class='test'>Some text</div>

【讨论】：

我刚刚对其进行了测试，结果如下：prntscr.com/b9dadn 与需要的东西相去甚远，浮动 div 'sometext' 是怎么回事，不错的功能，但与我需要的相去甚远。跨度>
@erezT sometext 是带有变换的元素。该数组是基于 0 的，因此它应该使用 8-11 作为索引（参考更新的答案）而不是原来的 9-12。如果仍然不能满足您的需求，您能否显示您正在寻找的确切输出？
我已经在开头的帖子中说明了一切。再次澄清一下，我不需要类飞来飞去，我只需要动态存储的每个matrix3d数量，因为如果稍后在它们上运行statmentets，我需要运行它们。再说一遍 - 视图是动态的，所以当视图移动数字时，我希望这些数字作为变量，以后可以用作参考。
@erezT: (a) 需要有一个具有 3d 变换的元素，没有它你无法找到值。 (b) 我给了你一个示例，你必须对其进行调整，以便在 matrix3d 更改时执行这段代码。这是唯一的方法。变量没有神奇的直接赋值。
我会尝试并告诉你，如果它在我设置答案时有效，非常感谢你。