您如何使用 javascript 读取 div 的旋转？答案

【问题标题】：How do you read the rotation of a div using javascript?您如何使用 javascript 读取 div 的旋转？
【发布时间】：2021-07-24 15:40:15
【问题描述】：

我有一个旋转的轮子，我需要读取它的旋转。它旋转并停止，然后我需要读取旋转以了解分配给它的点数。 (the wheel with point values on it)。我该怎么做？我认为它会是 document.querySelector(".container").style.transform.rotate 但它返回 NaN。

这是我用来旋转轮子的代码。

var spinInterval = 0;
function timeSpin() {
  var loop = setInterval(function () {
    let spin = Math.round(Math.random() * 100);
    spinInterval += spin;
    let rotate = `rotate(${spinInterval}deg)`;
    document.querySelector(".container").style.transform = rotate;
    // console.log(rotate);
    rotation = spinInterval;
  }, 100);

  setTimeout(function () {
    clearInterval(loop);
  }, 5000);
}

【问题讨论】：

嗯，结束旋转不就是最后一个spinInterval吗？
不，不是。它在容器上具有 5s 的转换属性。这允许平滑移动，但不幸的是旋转值不会跟上。

标签： javascript css transform

【解决方案1】：

您可以在外部 setTimeout 的回调中简单地访问最终旋转。

setTimeout(function () {
  clearInterval(loop);
  // inline style.transform
  console.log(document.querySelector(".container").style.transform);
}, 5000);

// rotate(2279deg)

或者您可以使用 window.getComputedStyle() 返回完整计算的变换矩阵。您需要从那里解析它。

setTimeout(function () {
  clearInterval(loop);
  // full computed transform matrix
  const rotation = window.getComputedStyle(document.querySelector(".container")).getPropertyValue('transform');
  console.log(rotation);
}, 5000);

// matrix(-0.7880107536067242, -0.6156614753256553, 0.6156614753256553, -0.7880107536067242, 0, 0)

关于 CSS-Tricks 的数学概述：Get Value of CSS Rotation through JavaScript 或在此答案中：How to get CSS transform rotation value in degrees with JavaScript

var spinInterval = 0;
function timeSpin() {
  var loop = setInterval(function () {
    let spin = Math.round(Math.random() * 100);
    spinInterval += spin;
    let rotate = `rotate(${spinInterval}deg)`;
    document.querySelector(".container").style.transform = rotate;
    // console.log(rotate);
    rotation = spinInterval;
  }, 100);

  setTimeout(function () {
    clearInterval(loop);
    console.clear();
    // inline style.transform
    console.log(document.querySelector(".container").style.transform);

    // full computed transform matrix
    const rotation= window.getComputedStyle(document.querySelector(".container")).getPropertyValue('transform');
    console.log(rotation);
  }, 5000);
}

document.querySelector('button').addEventListener('click', timeSpin);

.container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border-right: 8px solid yellow;
  border-left: 8px solid lightgray;
  border-top: 8px solid aqua;
  border-bottom: 8px solid pink;
 }

<div class='container'></div>
<button type='button' >Spin</button>

【讨论】：

非常感谢，如果没有 window.computedStyle()，我无法理解这一点

【解决方案2】：

使用CSS Typed Object Model API（仍然是草稿）可能会更容易，但同时您需要查看style.transform 并手动解析它。如果您知道这只是上面的轮换，您可以使用以下内容：

parseFloat(/rotate\(([0-9.]+)deg\)/.match(document.querySelector(".container").style.transform)[1])

【讨论】：