Instantly share code, notes, and snippets.

# hkatzdev/currentRotation.md

Created October 28, 2020 04:30
Show Gist options
• Save hkatzdev/87dbe6bec4efaee29d9ee7cee0e78e32 to your computer and use it in GitHub Desktop.
0BSD licensed function to find css rotation.
title tags
currentRotation
browser,css,intermediate

Find the current rotate or rotateY value of an element in degrees.

• Uses window.getComputedStyle() and CSSStyleDeclaration.getPropertyValue() to get transform matrix.
• Calculates the current degree with Math.atan2() based off of the returned matrix.
• Returns a number from 0-360.
• Due to precision you may want to round the result.
• Does NOT work for rotateX (see comments for details).
• Licened under 0BSD.
/**
* Find the current rotate or rotateY value of an element in degrees.
* @function currentRotation
* @param {Element} element - The element to check the rotation of.
* @returns {number} Returns the current rotation in degrees (from 0-360).
*/
const currentRotation = element => {
const allStyles = window.getComputedStyle(element, null);
const transformMatrix = allStyles.getPropertyValue('transform');
// If the property is empty or set to none, then there is no rotation.
if (transformMatrix === '' || transformMatrix === 'none') return 0;
const flattenedMatrix = transformMatrix.split(/[(,]/);
/*
* Both rotate and rotateY have values that line up.
* Unfortunetly, rotateX does not have any spots that line up.
* Since it requires special detection rotateX is ***not*** supported.
* For Reference:
* rotate (Adeg) = matrix  ( cos(A), sin(A), -sin(A), cos(A), 0, 0       );
* rotateY(Ydeg) = matrix3d( cos(Y), 0,      -sin(Y), 0,      0, 1,      ...
* rotateX(Xdeg) = matrix3d( 1,      0,      0,       0,      0, cos(Y), ...
*/
const arctan2 = Math.atan2(-flattenedMatrix[3], flattenedMatrix[1]);
const arctan2Deg = arctan2 * 180 / Math.PI;
/*
* By default arctan2Deg will be between -180 to 180.
* This is due to how arctan2 works (uses all 4 quadrants).
* However, most likely 0-360 deg is expected.
* Add 360 deg if arctan2Deg < 0
*/
return arctan2Deg < 0 ? arctan2Deg + 360 : arctan2Deg;
};
currentRotation(document.querySelector('p')); // 180