Profiwissen CSS3

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.

-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
-ms-transform: skew(30deg);
transform: skew(30deg);

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:

#sponsors a:hover {
transform: rotate(7deg) scale(1.2);
transform-origin: right bottom;
}

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

#sponsors a:hover {
-webkit-transform: rotate(7deg)
scale(1.2);
-moz-transform: rotate(7deg)
scale(1.2);
-o-transform: rotate(7deg)
scale(1.2);
-ms-transform: rotate(7deg)
scale(1.2);
transform: rotate(7deg) scale(1.2);
-webkit-transform-origin: right
bottom;
-moz-transform-origin: right
bottom;
-o-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom
}

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

transform-origin: 0 0;
transform: rotate(15deg) translateX
(230px) scale(1.5, 2.6) skew(220deg, -150deg) translateX(230px)
können Sie auch schreiben:
transform-origin: 0 0;
transform: matrix(1.06, 1.84, 0.54,
2.8, 466px, 482px)

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.

image.jpg

© Internet Magazin

Durch den leicht gedrehten Schatten sieht die gelbe Box aus, als wäre sie ein nur rechts festgeklebter Zettel.

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:

<div class="schatten">CSS3!!</div>

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:

.schatten {
position: relative;
}

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.

.schatten:before {
content: "";

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:

position: absolute;
bottom: 15px;
left: 10px;
z-index: -1;
width: 60%;
height: 20%;

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".