Performanceoptimiert

Damit wird ein Element um 200 Pixel von links und 300 Pixel von oben verschoben. Hier können Sie ebenfalls mit den Einzelwertangaben arbeiten: translateX, das ein Element nach links schiebt, und translateY zur Verschiebung von oben.Der vierte im Bunde neben rotate(), scale() und translate() ist skew() zum Verzerren von Elementen. Wenn Sie bei skew() nur einen einzelnen Wert angeben, so bewirkt dies eine Verzerrung um den angegeben Winkel auf der X-Achse, im Beispiel um 30 Grad.

Performanceoptimiert

Verschiebungen lassen sich ganz klassisch in CSS 2.1 mit position: absolute realisieren, indem man die Werte für top und left modifiziert. Und anstelle von scale() können Sie die Größe von Elementen auch über width und height bestimmen. Trotzdem sind translate() und scale() durchaus sinnvoll.Zum einen benötigt man Verschiebungen und Größenänderungen gerade in Kombination mit den anderen Transformationen, zum anderen sind translate() und scale() wie alle transform-Operationen hardwarebeschleunigt und deswegen performanter - Browserunterstützung vorausgesetzt.

Gut kombiniert

Mehrere Transformationen lassen sich kombinieren, indem Sie diese hinter transform angeben. Machen Sie dabei kein Komma zwischen den einzelnen Angaben.Ein Beispiel von der Beercamp-Seite (beercamp.com/2010/ ) soll Ihnen zeigen, wie das geht. Am Ende der Seite sind in kleinen Kästchen die Sponsoren aufgeführt. Hovert man über eines dieser Kästchen, wird es leicht gedreht und vergrößert. Der Punkt für die Drehung ist die rechte Ecke. Das geht über den folgenden Code:

In diesem Code wurden jetzt nur die offiziellen Varianten benutzt, jetzt benötigen Sie noch die Varianten mit den herstellerspezifischen Präfixen.

Ganz schön aufwändig, immer die browserspezifischen Varianten zu schreiben. Arbeitserleichterung bieten nützliche Tools wie beispielsweise CSS-Prefixer: Sie geben den Originalcode mit der Standardeigenschaft ein, die Varianten mit den herstellerspezifischen Präfixen werden Ihnen automatisch generiert.Übrigens können Sie anstatt über rotate(), scale(), translate() oder skew() die Transformationen ebenfalls über Matrix-Angaben hinter dem Schlüsselwort matrix() realisieren. Das erlaubt genauere Angaben und verkürzt mitunter den Code. Allerdings muss man sich mit dieser Logik erst einmal vertraut machen. Statt

Diese Umrechnungen können Sie sich beispielsweise vom IE-Transform-Translator durchführen lassen.

Schlagschatten in Variationen

Für Transformationen gibt es viele schöne Einsatzmöglichkeiten. CSS3-Features laufen aber üblicherweise erst zu ihrer wahren Höchstform auf, wenn man sie mit anderen CSS3-Features kombiniert. Ein schönes Beispiel hierfür sind elegante und echt wirkende Schatten.

Für Schatten gibt es natürlich box-shadow in CSS3. Aber der Schatten ist normalerweise gerade; schöner und dreidimensional wirken diese Schatten, wenn sie gedreht sind - über CSS Transforms, versteht sich. Um das zu bewerkstelligen, kann man zu weiteren div-Containern speziell für die Schatten greifen, aber eleganter ist es, die Schatten über erzeugte Inhalte zu setzen.Als Beispiel soll eine gelbe Box mit einem Schatten versehen werden, damit es so aussieht, als wäre sie eine Haftnotiz, die an der einen Seite festgeklebt ist, an der anderen - nicht festgeklebten - aber einen leichten Schatten wirft:

Das Element erhält allgemeine Formatierungen wie eine Breite und eine gelbe Hintergrundfarbe. Der entscheidende Punkt ist dann: Es braucht position: relative, um als Bezugspunkt für den nachfolgend eingefügten und über position: absolute platzierten Schatten dienen zu können:

Dann wird der Schatten über erzeugte Inhalte eingefügt, mithilfe von .schatten:before. Was eingefügt wird, gibt content an - es ist in diesem Fall nichts.

Dieses "Nichts" wird absolut positioniert, und über bottom und left an die richtige Stelle verschoben. z-index sorgt dafür, dass es hinter der Box platziert ist. Außerdem erhält es passende Maße über width und height: