Effekte mit CSS3 transforms

Mit sog. CSS3 transforms lassen sich einfach statische und dynamische (z.B. hover) Elementmanipulationen vornehmen, wie beispielsweise die Drehung eines Bildes.

Um die Veränderung zu verdeutlichen, habe ich die transform-Befehle jeweils auf den hover-Effekt gelegt, d.h. die Effekte treten ein, wenn Sie die Maus über die jeweiligen Elemente bewegen. Selbstverständlich ließen sich die CSS-Auszeichnungen auch direkt - also in dem Fall ohne hover - anwenden, denkbar z.B. um die Zugänglichkeit einer Webseite zu verbessern und via Klick neben der Schriftgröße auch alle Bilder einheitlich zu vergrößern.

Dreht das Element im Uhrzeigersinn nach dem angegebenen Grad. Um gegen den Uhrzeigersinn zu drehen, können auch negative Werte verwendet werden.

div#rotate:hover {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* ältere Versionen von Chrome und Opera, Safari */
    transform: rotate(20deg); /* standardkonforme Browser */
}

Mit translate lassen sich Elemente um die angegebenen Pixelwerte versetzen. Der erste Wert definiert den Versatz von links (x-Achse), der zweite Wert den von rechts (y-Achse). Alternativ können aber auch die Einzelbefehle translateX(Wert) sowie translateY(Wert) verwendet werden.

div#translate:hover {
    -ms-transform: translate(20px,10px); /* IE 9 */
    -webkit-transform: translate(20px,10px); /* ältere Versionen von Chrome und Opera, Safari */
    transform: translate(20px,10px); /* standardkonforme Browser */
}

Hiermit werden Elemente vergrößert (mittels Werten größer 1) bzw. verkleinert (mittels Werten kleiner 1) , wobei das Zentrum des Elements dabei auf der ursprünglichen Position bleibt. Durch die Verwendung von zwei Werten, können horizontale sowie vertikale Größenänderung unterschiedlich gestaltet werden. Es können auch nicht ganzzahlige Werte verwendet werden, z.B. 1.2. Auch bei dieser Methode gibt Einzelschreibweisen: scaleX(Wert), scaleY(Wert).

div#scale:hover {
    -ms-transform: scale(1.35,1.35); /* IE 9 */
    -webkit-transform: scale(1.35,1.35); /* ältere Versionen von Chrome und Opera, Safari */
    transform: scale(1.35,1.35); /* standardkonforme Browser */
}

Mit dieser Methode lassen sich Elemente kippen. Der erste Wert definiert die Drehung um die x-Ache, der zweite Wert die Drehung um die y-Achse. Alternativ können auch skewX(Winkel) und skewY(Winkel) eingesetzt werden.

div#skew:hover {
    -ms-transform: skew(10deg,15deg); /* IE 9 */
    -webkit-transform: skew(10deg,15deg); /* ältere Versionen von Chrome und Opera, Safari */
    transform: skew(10deg,15deg); /* standardkonforme Browser */
}

Matrix stellt eine Kombination der oben genannten Methoden dar und kann mit insgesamt sechs Parametern befüllt werden. Diese sind sind wie folgt festgelegt:

• skewX
• scaleX
• scaleY
• skewY    
• translateX
• translateY

Gradangaben müssen hierbei in  Dezimalzahlen umgerechnet werden!

div#matrix:hover {
    -ms-transform: matrix(0.866,0.5,-0.5,0.866,3,2); /* IE 9 */
    -webkit-transform: matrix(0.866,0.5,-0.5,0.866,3,2); /* ältere Versionen von Chrome und Opera, Safari */
    transform: matrix(0.5,1,1,0.5,0,0); /* standardkonforme Browser */
}