Skip to content

Instantly share code, notes, and snippets.

@hoandang
Last active May 25, 2022 03:33
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save hoandang/5989980 to your computer and use it in GitHub Desktop.
Save hoandang/5989980 to your computer and use it in GitHub Desktop.
Javascript: get the angle by which the element is rotated
function getRotationAngle(target)
{
const obj = window.getComputedStyle(target, null);
const matrix = obj.getPropertyValue('-webkit-transform') ||
obj.getPropertyValue('-moz-transform') ||
obj.getPropertyValue('-ms-transform') ||
obj.getPropertyValue('-o-transform') ||
obj.getPropertyValue('transform');
let angle = 0;
if (matrix !== 'none')
{
const values = matrix.split('(')[1].split(')')[0].split(',');
const a = values[0];
const b = values[1];
angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
}
return (angle < 0) ? angle +=360 : angle;
}
// example
console.log(getRotationAngle(document.getElementById('i-am-rotated')));
@jgphilpott
Copy link

Thank You!

@Musiquammation
Copy link

Can we do this in canvas ?
If yes, what are the values for X and Y ?
If no, how I can to know the values of X and Y in canvas ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment