Jak odzyskać pseudoelementowy styl transformacji za pomocą JavaScript?

Question

Sytuacja:

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

Pytanie:
muszę odzyskać nim można wyświetlać i zmieniać go. Potrzebujesz pomocy ze ścieżką prowadzącą do 360.
Jakieś pomysły?

Answer 1

Wierzę, że document.getElementById('XYZ').style.WebkitTransform zwróci "rotate(360deg)" w przeglądarkach WebKit. Możesz użyć style.MozTransform dla Firefox 3.1+, style.msTransform dla IE9 +, style.OTransform dla Opery.

Źródło: http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html

Aby powiązać z elementem zdarzenia myszy:

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)'; 
} 

To może być prostsze z jQuery, ale musisz znać swoje korzenie JavaScript!

Answer 2

Będziesz potrzebować jQuery ale może być to, czego szukasz ....

$(document).ready(function(){ 

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


}); 

ta zwraca wartość jako ciąg znaków. Prawdopodobnie powinieneś sprawdzić, czy zwróci 360deg lub całą rzecz. Upuść div zarówno dla jQuery, jak i CSS. Dla jQuery jest szybszy, niż nie wywoływanie go, aw CSS nie dodaje specyfiki.