CSS Rotate verschachteln?

C

Catscratch29

Hallo,

ich möchte Objekte mit CSS drehen, was auch soweit ganz gut klappt. Jedoch habe ich jetzt Objekte innerhalb anderer, welche mitgedreht werden, aber gerade erscheinen sollen. Sprich, diese möchte ich nach dem Drehen des "Mutterobjekts" wieder zurückdrehen.

Das klappt bisher nicht.
So sieht das ganze aus.

Code: 
<div id="obj1">
  <div id="obj2" />
</div>

Code: 
#obj1 {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
#obj2 {
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);  
}

Ich hab die DIVs ineinander geschachtelt, da ich das DIV (obj2) relativ zum DIV (obj1) ausrichten muss und mir das am elegantesten erschien.

In meinem Fall ist DIV1 eine Grafik an der Text ausgerichtet werden soll (DIV2). Der Text soll mit der Grafik rotiert werden, aber immer gerade lesbar sein. Deswegen wollt ich den Text "zurück" rotieren.

Es klappt auch alles, außer die Rotation von obj2. Muss ich was beachten? Oder ist das gar nicht möglich?

Danke
 
Getestet im Firefox unter Windows 7
Code: 
<html>
    <head></head>
    <body>
    <style type="text/CSS">
        #obj1, #obj2{
            width: 200px;
            height: 40px;
        }
        #obj1 {
            background-color: red;
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
        #obj1:hover #obj2 {
            background-color: green;
        }
        #obj2 {
            background-color: blue;
            -moz-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
        }
    </style>
    <div id="obj1">
        <div id="obj2" />
    </div>
</body>
</html>
klappt einwandfrei.
 
Jop hast recht, aber mir is schon ma aufgefallen das der firefox so nett is und sich die fehler so hinbastelt das sie meistens funktionieren, so wie mit meinem copy&paste bug xD
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück