How to get pseudo-element transform style value using 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 get 360 so that I can display and modify it. Need help on a journey that will lead me to 360.
Any ideas?

Answer 1

I believe that WebKit document.getElementById('XYZ').style.WebkitTransformwill return "rotate(360deg)"in browsers. You can use style.MozTransformfor Firefox 3.1+, style.msTransformfor IE9 +, style.OTransformfor Opera.

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

To associate an item 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 easier with jQuery, but you need to know your JavaScript roots!

Answer 2

jQuery, , ....

$(document).ready(function(){

$(".xy:hover").css("transform")


});

. , , 360deg . div jQuery CSS. jQuery , CSS .