How to retrieve pseudo-element transform-style value with Javascript?

Question

Situation:

div.xy:hover {
  transform: all rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}

Question:
I need to retrieve the 360 therewith I can display and change it. Need some help with the path that leads me to the 360.
Any ideas?

Answer 1

I believe document.getElementById('XYZ').style.WebkitTransform will return "rotate(360deg)" in WebKit browsers. You can use style.MozTransform for Firefox 3.1+, style.msTransform for IE9+, style.OTransform for Opera.

Source: http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html

To bind element with mouse events:

var e = document.getElementById('test') // Your div ID

e.onmouseover = function(){
    var degree = 360; // Rotation on :hover
    e.style.WebkitTransform = 'rotate(' + degree + 'deg)';
    e.style.MozTransform = 'rotate(' + degree + 'deg)';
    e.style.OTransform = 'rotate(' + degree + 'deg)';
    e.style.msTransform = 'rotate(' + degree + 'deg)';
    e.style.transform = 'rotate(' + degree + 'deg)';
}
e.onmouseout = function(){
    var degree = 0; // Initial rotation
    e.style.WebkitTransform = 'rotate(' + degree + 'deg)';
    e.style.MozTransform = 'rotate(' + degree + 'deg)';
    e.style.OTransform = 'rotate(' + degree + 'deg)';
    e.style.msTransform = 'rotate(' + degree + 'deg)';
    e.style.transform = 'rotate(' + degree + 'deg)';
}

It might be simpler with jQuery, but you've got to know your JavaScript roots! ​