:hover bei CSS3 Eigenschaft transform

[Paule]

Guten Tag,

beim ausprobieren der neuen Eigenschaft "transfom: rotate()" tritt bei mir folgendes Problem auf. Drehe ich ein Element über diese Methode, kann ich via CSS :hover (also beim überfahren mit der Maus) beispielsweise das Element wieder "gerade" Ausrichten. So weit so gut. Erstelle ich das Element zuvor jedoch erst via JavaScript und definiere auch dort gleich die Transform-methode und hänge den Knoten in die Dom-Struktur, greift mein :hover Effekt plötzlich nicht mehr. Andere zugeordnette CSS Eigenschaften lassen sich via :hover erzielen, daher weiß ich auch das ich das richtige Element anspreche... nur das "gerade" drehen funktioniert nicht.

hier mal kurz ein Auszug der JavaScripterstellung:

  
rahm = document.createElement("div");  
rahm.className = "rahm";  
rahm.style.display = "inline-block";  
rahm.style.WebkitTransform = "rotate("+[b]+"deg)";  
rahm.style['-ms-transform'] = "rotate("+[b]+"deg)";  
rahm.style.MozTransform = "rotate("+[b]+"deg)";  
rahm.style.OTransform = "rotate("+[b]+"deg)";  
rahm.style.transform  = "rotate("+[b]+"deg)";  

was wunderbar funktioniert. Der Wert [b] ist Teil einer Funktion der den Winkel bestimmt.

  
.rahm:hover {  
-webkit-transform: rotate(0deg);  
-moz-transform: rotate(0deg);  
-ms-transform: rotate(0deg);  
-o-transform: rotate(0deg);  
transform: rotate(0deg);  
border:#000 10px solid;  
}  

Der Rahmen des Elementes wird beim überfahren verändert, jedoch ändert sich nichts an der Verdrehung.

Wie gesagt, wird das Element ohne JavaScript erzeugt, also im Vorfeld normal im HTML-Baum platziert, funktioniert es... .

Würde mich freuen wenn mir jemand nen Tipp geben könnte was ich falsch mache..

Gruß
Paule