How can I find the CSS3 rotation of an element?


I try to find the css rotation of one element and then apply it to another element. How would I go about that? The CSS for reference (but it could be any rotation or even any transform) :

#firstelement { transform: rotate(90deg); }

I don't find anything in the object of the first element. Any ideas?

Problem courtesy of: Willem Mulder


If you want to retrieve styles that may be set via CSS, you have to fetch them in a little more involved way (that is different for IE and everyone else) than just reading the style property. Here's a function that can do that:

function getStyle(el, styleProp) {
    if (el.currentStyle) {
        // look for IE
    } else if (window.getComputedStyle) {
        // all other browsers
    } else {
        // fall back to inline style

var val = getStyle(document.getElementById("firstelement"), "transform");

Keep in mind you will have to manage the vendor-specific prefixes for some CSS3 settings.

You can see an example here that will work in Chrome or Safari: (it's coded for the webkit prefixes).

Solution courtesy of: jfriend00


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.