CSS/Tutorials/Transform

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
3x30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
CSS

Durch CSS-Transform können Sie beispielsweise die Form eines HTML-Elementes ändern. So lässt es sich etwa spiegeln, drehen oder scheren, aber auch verschieben.

Beachten Sie: Transformierte Elemente ignorieren den Elementfluss. Es wird ein Stapelkontext erstellt. In diesem Fall verhält sich das Objekt wie ein position: fixed Block für seine Kindelemente.


transform[Bearbeiten]

Dieser Artikel beschreibt die CSS-Eigenschaft transform. Das SVG-Attribut transform ist unter SVG/Transformationen aufgeführt.


Die transform-Eigenschaft wendet eine 2D- oder 3D-Transformation auf ein Elemten an, indem eine oder mehrere Transform-Funktionen angewandt werden:

translate[Bearbeiten]

Mit der translate()-Funktion können Sie die Position eines Elements verschieben. So können Elemente, bzw. Teile der Webseite bei :hover oder mit Animationen bewegt werden. Dies sollte jedoch nie zum Selbstzweck werden.

  • CSS 3.0
  • IE 10
  • Firefox
  • Chrome
  • Safari
  • Opera

Details: caniuse.com

transform: translate() benötigt folgende Angaben:

  • eine (positive oder negative) Längenangabe für die horizontale Verschiebung,
  • eine (optionale) Längenangabe für die vertikale Verschiebung
Beachten Sie: Wenn nur ein Wert angegeben wird, wird nur die x-Achse verschoben.
Verschiebung eines HTML-Elements ansehen …
@keyframes translating {
  0%  { transform: translate(0, 0);}
  25% { transform: translate(20em, 0);}
  50% { transform: translate(20em, 200px);}
  75% { transform: translate(0, 200px);}
  100%{ transform: translate(0, 0);}
}
.box { 
    animation: translating 4s linear infinite;
}

translateX, translateY und translateZ[Bearbeiten]

Es gibt verschiedene Funktionen, die in Struktur und Syntax geringfügig abweichen:

  • transform: translateX() benötigt folgende Angaben:
  • transform: translateY() benötigt folgende Angaben:
  • transform: translateZ() verschiebt ein Element entlang der Z-Achse nach vorne oder hinten.
Verschiebungsfunktionen translateX() und translateY() ansehen …
.box {
  border-radius: 10px;
  box-shadow: 1px 1px 10px 0;
  float: left;
  height: 200px;
  margin: 0 20px 0 0;
  padding: 20px;
  width: calc(33.33% - 60px);
  transition: all 2s;
}

main:hover .translateXY {
  transform: translate(calc(100% + 20px), 260px);
}

main:hover .translateX {
  transform: translatex(calc(100% + 20px));
}

main:hover .translateY {
  transform: translatey(260px);
}

Das Beispiel verwendet die Funktion calc(), um die Breite der drei Boxen auf die verfügbare Breite des Elternelements anzupassen. Damit nach der Animation die Boxen untereinander stehen, bedarf es der Angabe 100% zuzüglich eines eventuellen Außenabstandes (wieder mit calc() berechnet).

translate3d[Bearbeiten]

translate3d(x, y, z) verschiebt die Position eines Elements im dreidimensionalen Raum.

  • CSS 3.0
  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera

Sie benötigt folgende Angaben:

  • x: eine (positive oder negative) Längenangabe für die Verschiebung auf der X-Achse
  • y: eine Längenangabe für die Verschiebung auf der Y-Achse
  • z: eine Längenangabe für die Verschiebung auf der /-Achse
    Beachten Sie: Für den dritten Wert wird eine absolute Längenangabe benötigt. Bei einer Prozentangabe wird die Transformation nicht ausgeführt.


Verschieben mit translate3d() ansehen …
.box {
  border-radius: 0.5em;
  float: left;
  height: 7em;
  width: 13em;
  margin: 0 1em 0 0;
  padding: 0.5em;
  transition: all 2s;
}

main:hover .translateXY {
  transform: translate3d(15em, 9em, 0);
}

main:hover .translateX {
  transform: translate3d(15em, 0, 0);
}

main:hover .translateY {
  transform: translate3d(0, 9em, 0);
}
Dieses Beispiel ähnelt dem oberen Beispiel, verwendet aber die hardwarebeschleunigte translate3d()-Funktion. Deshalb sind Werte für alle Koordinaten aufgeführt. Wird nur in eine Richtung verschoben, betragen die anderen Werte 0.

scale[Bearbeiten]

Mit scale() und den anderen hier vorgestellten Funktionen können Sie ein Element in seiner Größe verändern. transform: scale() ist die zusammenfassende Funktion von transform: scaleX() und transform: scaleY().

  • CSS 3.0
  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera

Details: caniuse.com

transform: scale() erwartet als Argument bis zu zwei Streckungsfaktoren. Der erste gibt die Größenänderung in horizontaler, der zweite die in vertikaler Richtung an. Wird nur eine Zahl angegeben, so gilt dieser Streckungsfaktor für beide Richtungen.

Der Streckungsfaktor ist eine Zahl, das „Streckungszentrum“ (mathematisch korrekt die Fixpunktgerade) wird durch die Eigenschaft transform-origin festgelegt. Wird dazu keine Angabe gemacht, so ist die Fixpunktgerade die durch den Mittelpunkt des Elements verlaufende Vertikale. Streckungsfaktoren größer als Eins vergrößern (strecken) das Element, Faktoren zwischen Null und Eins stauchen es und negative Faktoren spiegeln das Element an der Fixpunktgeraden.

Der Vollständigkeit halber sei erwähnt, dass k = 1 das Element unverändert lässt, wohingegen k = 0 die Breite des Elements auf Null setzt.

Skalierung und Spiegelung eines Elements ansehen …
@keyframes scaling {
    0%{ transform: scale(1);}
   20%{ transform: scale(2);}
   40%{ transform: scale(0.5);}
   60%{ transform: scale(0);}
   80%{ transform: scale(-1);}
  100%{ transform: scale(1);}   
}
.box { 
    animation: scaling 10s steps(1) infinite;
}

Die Box wird mehrfach skaliert. Die entsprechende Animation enthält eine Angabe von steps, damit sie nicht allmählich animiert und dabei evtl. ruckelt, sondern dies in verschiedenen Schritten anzeigt.

Beachten Sie: Der Elementfluss bleibt unverändert. Bei einer Vergrößerung ragt das Element über sein Elternelement heraus.

scaleX, scaleX und scaleZ[Bearbeiten]

Mit transform: scaleX() können Sie eine Parallelstreckung entlang der Horizontalen erreichen. Mit einem negativen Streckungsfaktor können Sie einzelne Wörter oder Buchstaben spiegeln:

Spiegelung eines Texts ansehen …
.gespiegelt {
  transform: scaleX(-1);
}

Alle Elemente der Klasse .gespiegelt werden entlang der x-Achse gespiegelt. Damit dies bei den inline-Elementen span funktioniert, müssen sie einen display:inline-block bekommen.


Mit transform: scaleY()können Sie eine Parallelstreckung entlang der Vertikalen erreichen.

Paralellstreckung ansehen …
.bigger:hover aside {
	transform: scaleY(2);
}

.smaller:hover aside {
	transform: scaleY(.5);
}

.invisible:hover aside {
	transform: scaleY(0);
}

.mirrored:hover aside {
	transform: scaleY(-1.5);
}

Die Funktion transform: scaleY() steuert die Parallelstreckung in vertikaler Richtung und wird in völliger Analogie zu transform: scaleX() verwendet.


Beachten Sie: Der Elementfluss bleibt unverändert.
Wie Sie an den Beispielen erkennen können, wird die ursprüngliche Größe der Elemente für den Dokumentfluss verwendet. Skalierte Objekte können so über Ränder oder in den Text hineinragen.


Mit transform: scaleZ() können Sie eine räumliche Streckung entlang der Z-Achse erreichen.

Opening Crawl - 1 ansehen …
.scalez {
  background: black;
  color: gold;
}

.scalez:hover {
  transform: perspective(1000px) scaleZ(3) rotateX(45deg);
}

Wenn Sie auf der schwarzen section hovern, erzielt die Funktion transform: scaleZ() eine räumliche Streckung. Sie können die Wirkung durch eine Änderung der perspective()-Funktion verstärken.
Durch eine Animation der Texts können Sie einen Opening Crawl (siehe nächstes Kapitel) wie in den Star Wars Filmen erreichen.

scale3d()[Bearbeiten]

The scale3d(x, y, z)-Funktion skaliert die Größe eines Elements im dreidimensionalen Raum.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Sie benötigt folgende Angaben:

  • x: eine Zahlenangabe des Streckungsfaktors auf der X-Achse
  • y: eine Zahlenangabe des Streckungsfaktors auf der Y-Achse
  • z: eine Zahlenangabe des Streckungsfaktors auf der Z-Achse
Strecken und Stauchen eines Quaders ansehen …
@keyframes skalierung {
     0% { transform: scale3d(1, 1, 1); }
    17% { transform: scale3d(1, 2, 1); }
    33% { transform: scale3d(1, 2, 2); }
    50% { transform: scale3d(2, 2, 2); }
    67% { transform: scale3d(2, 2, 1); }
    83% { transform: scale3d(2, 1, 1); }
   100% { transform: scale3d(1, 1, 1); }   	     	
}

.cube {
	animation: skalierung 5s infinite linear;
}
}

Dieses Beispiel zeigt, wie ein Würfel nacheinander zu einem Quader gestreckt und anschließend wieder gestaucht wird.

skew[Bearbeiten]

Mit skew() können Sie ein Element neigen, bzw. verzerren. Durch dieses Schrägstellen können Sie rechteckige Elemente zu Parallelogrammen neigen.

  • CSS 3.0
  • IE 10
  • Firefox
  • Chrome
  • Safari
  • Opera

Achtung!

  • Achtung
Die Funktion skew() ist nicht in den letzten Entwurf des w3.org übernommen worden. MDN empfiehlt stattdessen bei einem Parameter skewX() und bei mehreren Parametern transform:matrix() zu verwenden.

skewX[Bearbeiten]

transform: skewX() benötigt folgende Angaben:

Im folgenden Beispiel sollen die Listenelemente der Navigation pfeilartig angeschrägt werden. Dafür verwenden wir transform: skewX():

angeschrägtes Menü aus Parallelogrammen ansehen …
  ul a {
    background: lightgrey;
    border: 1px solid grey;
    display: block;
    margin: 0.5em 1em;
    padding: 0.5em 1em;
    text-decoration: none;
    transform: skewX(-30deg);
  }

  ul a:hover {
    background: grey;
  }

Die Elemente der Navigation werden zu Parallelogrammen verzerrt - leider aber auch der Text der beinhaltenden Links!

Eine Möglichkeit wäre es, einem Kind-Element ul li a span eine entsprechende positive Verzerrung zu geben. Allerdings würde der Text dann zweimal verzerrt werden und entsprechend unscharf dargestellt.

In der hier verwendeten Alternative werden die angeschrägten Parallelogramme nun durch Pseudoelemente ul a::before gebildet. Diese werden mit z-index:-1; in den Hintergrund geschoben.

Die Links der Navigation werden normal darüber dargestellt.

angeschrägtes Menü aus Parallelogrammen-2 ansehen …
ul a {
  display: block;
  margin: 0.5em 1em;
  position: relative;
  text-decoration: none;
  z-index: 0;
}

ul a::before {
  background: lightgrey;
  border: 1px solid grey;
  content: "\A0 ";
  display: block;
  height: 100%;
  margin: -0.5em -1em;
  padding: 0.5em 1em;
  position: absolute;
  transform: skewX(-30deg);
  width: 100%;
  z-index: -1;
}

skewY[Bearbeiten]

transform: skewY() benötigt folgende Angaben:

Beispiel ansehen …
@keyframes skewing {
  0%  { transform: skewY(0deg);}
  20% { transform: skewY(10deg);}
  40% { transform: skewY(45deg);}
  60% { transform: skewY(90deg);}
  80% { transform: skewY(120deg);}
  100%{ transform: skewY(0deg);}
}
.box { 
    animation: skewing 10s steps(1) 0s infinite;
}

matrix[Bearbeiten]

Die transform: matrix()- und matrix3d()-Funktionen[1] kombinieren die verschiedenen Transformationen in einer Abbildungsmatrix (Anordnung von Zahlenwerten oder anderen mathematischen Objekten in Tabellenform) [2] mit 6 bzw. 9 Parametern. Diese Funktion dient wsl. eher zur dynamischen Erzeugung von Transformationen.

Es gibt einen Umrechner, obwohl solch ein Feintuning bezüglich der Stylesheet-Größe wohl nicht den Aufwand lohnt:


Siehe auch:

Hardwarebeschleunigung?[Bearbeiten]

Webseiten und ihre grafischen Effekte werden im Allgemeinen vom Browser selbst gerendert. Dabei kann es bei größeren Transformationen und Animationen zu kleinen Verzögerungen und Ruckeln kommen. Um dies zu vermeiden, übergeben moderne Browser rechenintensive Operationen an die GPU. So können Animationen glatt und ruckelfrei ausgeführt werden.

Bei Transformationen können Sie diese Hardwarebeschleunigung durch eine Verwendung der entsprechenden <function>3d() oder <function>Z() aktivieren.

Manche Entwickler schlagen daher vor ein

transform: translateZ(0) 

einzusetzen, um so die Hardwarebeschleunigung zu aktivieren.

Empfehlung: Verwenden Sie die 3D-Funktionen wie translate3D, rotate3D, etc auch bei 2D-Transformationen, um Ihre Webseiten hardwarebeschleunigt rendern lassen zu können.
„normale“ Verschiebung
transform: translateX(100px);


hardwarebeschleunigte 3D-Funktion
transform: translate3d(100px,0,0);


CSS-Transform
(Übersicht)

Siehe auch[Bearbeiten]

  • Polaroid-Bildergalerie
    In dieser Bildergalerie werden Bilder als kleinere Vorschauansichten angezeigt. Ein Berühren mit der Maus skaliert sie auf die Originalgröße. Zusätzlich erscheint die bisher durch verborgene figcaption als Bildunterschrift.
  • SVG/Tutorials/Rube-Goldberg-Maschinen
    unnötig komplizierte Maschinen, bei denen eine eigentlich triviale Aktion durch eine Kette nacheinander ablaufender Aktionen ausgelöst wird. Die SVG-Elemente werden mit CSS-Transforms animiert.

Weblinks[Bearbeiten]

  1. W3C: CSS Transforms Module Level 1
  2. Wikipedia: Abbildungsmatrix