14.03.2012 :: CSS 3 - Transition: rotate

Ich arbeite gerade an einem Webdesign bei dem ein paar DIV-Elemente um einige Winkelgrade gedreht dargestellt werden müssen. Weil ich kein Javascript oder Drittsoftware einsetzen wollte hab ich mich schlau gemacht was CSS für eine Lösung bieten könnte.

Gefunden habe ich etwas bei CSS 3 und zwar transform: rotate

CSS 3 hat zwar der Nachteil dass einige älteren Browser diese Strukturvorgabe nicht interpretieren können, dafür gibt es aber die Prototyp Erweiterungen -moz-, -o-, -webkit- und -ms- welche auch bei den jüngeren Versionen der älteren Browser die Darstellung provizieren können.

Und hier nun das CSS für die Darstellung einer Drehung von 30 Grad:

div {
   -moz-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   transform: rotate(30deg);
}

Kommentare