CSS3 setzt sich langsam aber sicher durch. Alle neuen Versionen der wichtigen Browser bieten – mehr oder weniger – Unterstützung für die neuen Funktionen. Es gibt sehr viele schöne und nützliche Dinge, die mit CSS3 Einzug halten. Ich habe da mal was zum Thema „transform“ vorbereitet…

Verkleinern und vergrößern mit „scale“

Syntax

[css]
.box {
transform: scale(1.5);
}
[/css]

Shorthand

Kürzer geht’s nicht.

Browserunterstützung

[css]
.box {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
[/css]

• Apple Safari 5+
• Google Chrome 10+
• Internet Explorer 9+
• Mozilla Firefox 3.6+
• Opera 11.1+

Beschreibung

Mittels transform und scale lassen sich Blockelemente skalieren. Die Skalierung wird ausgehend vom Faktor 1 angegeben. Einfaches Beispiel: ein Element mit 300 x 100 Pixeln (oben) wird auf den Faktor 1,5 vergrößert (Mitte) sowie auf Faktor 0,5 verkleinert (unten)

Der Befehl dazu:

[css]
.box {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
[/css]

bzw.

[css]
.box {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}
[/css]

Sofern nur ein Wert angegeben ist, werden die X- und die Y-Achse gleichermaßen skaliert. Es können aber auch unterschiedliche Werte, durch Komma getrennt, angegeben werden:

[css]
.box {
transform: scale(2,4);
}
[/css]

Soll gezielt nur eine Achse skaliert werden, kann mit scaleX oder scaleY der entsprechende Wert gesetzt werden.

Findet ihr langweilig?

Wie wär’s mit Bildern, die bei :hover vergrößert werden? So eine Art Lupeneffekt. Mit dem folgenden Code skaliert ihr Bilder um den Faktor 1,5 bei :hover. Verlasst ihr das Bild mit der Maus, wird die ursprüngliche Größe wiederhergestellt.

[css]
img {
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
-o-transition: -o-transform 0.4s ease-out;
-ms-transition: -ms-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
img:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
[/css]

Der Befehl transition ist für die animierte fließende Vergrößerung zuständig, indem die Skalierung über eine Zeitspanne (hier 0,4 Sekunden) erfolgt.

Beim Skalieren gilt es jedoch zu beachten, dass die Bilder aufgezoomt werden. Je höher die Skalierung, desto pixeliger wird das Bild.

Weitere Beispiele dazu findet ihr auf der Demoseite.

Blockelemente drehen mit „rotate“

Syntax

[css]
.box {
transform: rotate(2deg);
}
[/css]

Shorthand

Kürzer geht’s nicht.

Browserunterstützung

[css]
.box {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
[/css]

• Apple Safari 5+
• Google Chrome 10+
• Internet Explorer 9+
• Mozilla Firefox 3.6+
• Opera 11.1+

Beschreibung

Mit transform und rotate dreht ihr Blockelemente. Die Drehung wird dabei, wie sollte es auch anders sein, in Grad angegeben. Positive Werte drehen das Element nach rechts, negative Werte nach links. Im obigen Beispiel drehen wir ein Element um 2 Grad im Uhrzeigersinn:

Das sieht dann etwa so aus:

Ein nettes Beispiel für diesen Effekt hab ich noch. Im Zusammenspiel mit transition lassen sich wunderschöne Dinge zaubern. So beispielsweise Bilder, die sich einmal um sich selbst drehen:

[css]
img {
-webkit-transition: -webkit-transform 1s ease-out;
-moz-transition: -moz-transform 1s ease-out;
-o-transition: -o-transform 1s ease-out;
-ms-transition: -ms-transform 1s ease-out;
transition: transform 1s ease-out;
}
img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
} [/css]

Hier wird das Bild innerhalb von 1 Sekunde um 360 Grad gedreht. Live-Beispiel und mehr dazu auf der Demo-Seite:

Leider bietet der Internet Explorer in Version 9 keine Unterstützung für transition. Daher ist auch keine Darstellung einer 360 Grad-Drehung möglich.

Vielleicht für den ein oder anderen ganz interessant: diese Übersicht listet auf, welcher Browser in welcher Version Unterstützung für CSS3 und HTML5 bietet.

Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite: