How do you read the rotation of a div using javascript?

Question

I have a spinning wheel that I need to read the rotation for. It spins and stops, then I need to read the rotation to know how many points to assign to it. (the wheel with point values on it). How would I do this? I would think that it would be document.querySelector(".container").style.transform.rotate but it returns NaN.

This is the code I'm using to rotate the wheel.

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);
}

No it is not. It has a transition property of 5s on the container. This allows for smooth movement but the rotation value doesn't keep up unfortunely. — Jean Morrison, Jul 24 '21 at 15:56

pilchard · Accepted Answer · 2021-07-24T16:10:51.017

You can simply access the final rotation in the callback of the outer setTimeout.

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

// rotate(2279deg)

Alternatively You can use window.getComputedStyle() to return the full computed transform matrix. You'll need to parse it from there.

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)

A rundown of the math on CSS-Tricks:Get Value of CSS Rotation through JavaScript or in this answer: 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>

Thank you so much I couldn't have figured that out without the window.computedStyle() — Jean Morrison, Jul 24 '21 at 16:31
Note that getComputedStyle returns the local CSS transform; it does not apply all the transforms along the ancestral chain of elements. I wish there were a way to do that. — prideout, Nov 15 '22 at 22:10

score 0 · Answer 2 · answered Jul 24 '21 at 15:50

This may get easier with the CSS Typed Object Model API (still a draft), but meanwhile you need to look at style.transform and parse it manually. If you know it's just a rotation as above, you could use the following:

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

How do you read the rotation of a div using javascript?

2 Answers2