How to Get CSS Transform Rotation Value in Degrees with JavaScript

How to get CSS transform rotation value in degrees with JavaScript

Found the answer in another SO question, you have to add (2 * PI) if the result in radians is less than zero.

This line:

var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));

Needs to be replaced with this:

var radians = Math.atan2(b, a);
if ( radians < 0 ) {
  radians += (2 * Math.PI);
}
var angle = Math.round( radians * (180/Math.PI));

How to get style transform rotate value in javascript?

You could parse the transform style using match to get the rotate value:

var myElement = document.getElementById("demo");var rotate = myElement.style.transform.match(/rotate\((.+)\)/);alert(rotate && rotate[1]);  // avoid error if match returns null

<div id="demo" style="transform: rotate(30deg);width:100px;height:50px;background-color:red;">

Get element -moz-transform:rotate value in jQuery

Here's my solution using jQuery.

This returns a numerical value corresponding to the rotation applied to any HTML element.

function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return (angle < 0) ? angle + 360 : angle;
}

angle1 = getRotationDegrees($('#myDiv'));
angle2 = getRotationDegrees($('.mySpan a:last-child'));

etc...

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

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>

How to increase rotate value

Solution

the getRotationDegrees() function will calculate the rotate degress and return the value.

function getRotationDegrees(obj) {    var matrix = obj.css("transform");    if(matrix !== 'none') {        var values = matrix.split('(')[1].split(')')[0].split(',');        var a = values[0];        var b = values[1];        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));    } else { var angle = 0; }    return (angle < 0) ? angle + 360 : angle;}

var rotate = getRotationDegrees($("#mydiv")) + 30;$('#mydiv').css('transform', 'rotate('+rotate+'deg)')

#container{  padding: 100px;}#mydiv{  height: 200px;  width: 200px;  background: pink;  transform: rotate(30deg);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">  <div id="mydiv"></div></div>

Transform: rotate with values above 360deg, or below 0deg

first of all, welcome to stack overflow. Right now the best thing that I can think of is to use the "flip/mirror" transform function in css, wich is simple a reversed scale.

transform: scale(-1, -1)

This code should flip anything inside that division horizzontaly and vertically, so for example, if you have an arrow pointing at 90°, it will simply flip it horizzontally, wich will not do anything, and vertically, pointing it at -90°.
So your code should look like:

style={{transform: `rotate(${weatherData.parameters.wd.values}deg) scale(-1, -1)`}}

You will need for sure some fixes in the css, since the scale function could brake something in the view of the end result, but if you have a symmetrical arrow, everything should be fine. If you need some help with that just ask!

css transform. How to get rotation degree value from matrix( 0, 1, -1, 0, 0, 0)?

Without being a mathematician, you can parse the rotation angle from the style.

var style = $(el).attr('style'),
    rotation = parseInt(style.substr(style.indexOf("rotate("+7));

Note: This works because jQuery modifies the style attribute. If you set the rotation in CSS initially, it won't work.

Getting CSS transform rotateX angle from matrix3d

Figured it out myself. You have to use a = values[5] and b = values[4] for rotateX.

how to get the rotation info of a div into a variable in js

If you set transform: rotate(50deg) to your element

const schakkel = document.getElementById('schakkelaar').style.transform; will return the string rotate(50deg) to you.

What you need to if you want to get the actual transformvalue is to use getComputedStyle: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Then window.getComputedStyle(schakkel).transform will output the matrix transform of your element matrix(0.996195, 0.0871557, -0.0871557, 0.996195, 0, 0)

See more on how to use it on this good article at CSSTricks: https://css-tricks.com/get-value-of-css-rotation-through-javascript/

---

Related Topics