How to get the rotateY value applied on an HTML element using javascript? [duplicate]

Question

Here's what I'm trying to figure out:

I have a div with rotateY property applied to it, now i want to get this value using javascript.

<div class="test" style="transform: rotateY(90deg);"></div>

I want to target this div and access its rotateY value, the javascript code should return an integer value of 90

Unless they are written as inline styles (I think), Transforms get translated to a matrix property, under the hood. To get the matrix of your element, do this: const element = document.querySelector(".test"); const style = getComputedStyle(test); console.log("style:", style["transform"]); Then, you have to learn how to decode the matrix object to see what the rotateY would be. — Maiya
– Maiya, Commented Sep 25, 2019 at 7:24

Mihai T · Accepted Answer · 2019-09-25 07:18:55Z

1

You can get the transform style by using element.style.transform and then just replace the non numeric characters with empty.

And if you want to have a number typeof result, just wrap it in a parseInt with 10 radix

const test = document.querySelector('.test');
const stringResult = test.style.transform.replace( /\D+/g, '');
const numberResult = parseInt(stringResult,10)
console.log(stringResult, typeof stringResult)
console.log(numberResult, typeof numberResult)

<div class="test" style="transform: rotateY(90deg);"></div>

answered Sep 25, 2019 at 7:18

Mihai T

17.8k2 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Maiya Over a year ago

I tested this out, and it seems to only work if the style is written inline. Is that true, as far as you know?

04FS Over a year ago

@Maiya that is true in general, and does not have anything in particular to do with the transform property. stackoverflow.com/a/1098430/10955263

Maiya Over a year ago

Thanks. Was asking b/c the getComputedStyle() for transform gives you the matrix, and it would have been nice if there was a way around that.

Mihai T Over a year ago

No, for styles set by CSS i think the only way is to use getComputedStyle . But for inline styles ( like this question ) you can use style.nameOfProperty

Arun Over a year ago

@MihaiT Your answer works perfectly when there is only rotateY on the element as inline style, but it doesn't work if I add rotateX as well on the same element. Could you please give me an answer which decodes rotateY from matrix3D? I really appreciate everyone for the time and effort. Thank you all.

|

Deepu Reghunath · Accepted Answer · 2019-09-25 07:18:19Z

0

Javascript Example

function getValue() {
 var tr= document.getElementById('test').style.transform.replace(/[^\d.]/g, '');
 console.log('Rotate: ' + tr + 'deg');
}

<div id="test" style="transform: rotateX(90deg);"></div>
<button onclick="getValue()">get</button>

answered Sep 25, 2019 at 7:18

Deepu Reghunath

10.1k2 gold badges42 silver badges48 bronze badges

1 Comment

Mihai T Over a year ago

why getElementById ? there is no id in the code of the question. Also, stick to your original answer with getComputedStyle . And also, why at click of the button ? Why complicate things ?

Martin Hlouch · Accepted Answer · 2019-09-25 07:25:33Z

-1

You need to return a string with value and unit.

var myValue = 90;
document.getElementById('myElement').style.transform = 'rotateY(' + myValue + 'deg)';

answered Sep 25, 2019 at 7:25

Martin Hlouch

91 bronze badge

Collectives™ on Stack Overflow

How to get the rotateY value applied on an HTML element using javascript? [duplicate]

3 Answers 3

7 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Linked

Related