CSS/Tutorials/Transform
Text-Info
- 3x30min
- mittel
- • 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.
position: fixed Block für seine Kindelemente.- transform:
- translate(): Verschiebung
- scale(): Streckung
- skew(): Scherung
- matrix()
- drehen, kreisen und pendeln
- rotate(): Drehung
- transform-origin: Drehpunkt festlegen
- 3D-Transforms
Inhaltsverzeichnis
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 Element 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.
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
@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:- eine Längenangabe für die horizontale Verschiebung,
-
transform: translateY()benötigt folgende Angaben:- eine Längenangabe für die vertikale Verschiebung,
-
transform: translateZ()verschiebt ein Element entlang der Z-Achse nach vorne oder hinten.- eine Längenangabe für die Verschiebung
.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.
Sie benötigt folgende Angaben:
x: eine (positive oder negative) Längenangabe für die Verschiebung auf der X-Achsey: eine Längenangabe für die Verschiebung auf der Y-Achsez: eine Längenangabe für die Verschiebung auf der /-AchseBeachten Sie: Für den dritten Wert wird eine absolute Längenangabe benötigt. Bei einer Prozentangabe wird die Transformation nicht ausgeführt.
.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);
}
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().
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.
@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.
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:
.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.
.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.
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.
.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.
Sie benötigt folgende Angaben:
x: eine Zahlenangabe des Streckungsfaktors auf der X-Achsey: eine Zahlenangabe des Streckungsfaktors auf der Y-Achsez: eine Zahlenangabe des Streckungsfaktors auf der Z-Achse
@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.
Achtung!
Sowohl skew() als auch die Varianten skewX() und skewY() wirken nur auf transformable elements – das sind im Wesentlichen Blockelemente und solche, die durch CSS zu Block-Level-Elementen gemacht wurden.
skewX[Bearbeiten]
transform: skewX() benötigt folgende Angaben:
- ein (positives oder negatives) Winkelmaß in deg für die horizontale Verzerrung. Positive Werte bewirken eine Verzerrung gegen den Uhrzeigersinn.
Im folgenden Beispiel sollen die Listenelemente der Navigation pfeilartig angeschrägt werden. Dafür verwenden wir transform: skewX():
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.
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:
- ein Winkelmaß in deg für die vertikale Verzerrung
@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:
- meyerweb.com: The Matrix Resolutions (Umrechner von „normalen“ Transformationen in eine Matrix.
Siehe auch:
- Opera: Understanding the CSS Transforms Matrix
- useragentman: The CSS3 matrix() Transform for the Mathematically Challenged
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.
transform: translateX(100px);
transform: translate3d(100px,0,0);
(Übersicht)
Quellen[Bearbeiten]
- ↑ W3C: CSS Transforms Module Level 1
- ↑ Wikipedia: Abbildungsmatrix
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. - SELFHTML-Forum: Erläuterung der Orientierung der Schehrung von Gunnar Bittersmann
Weblinks[Bearbeiten]
- W3C: CSS Transforms Module Level 1 vom 20.Aug 2015
- github: Intro to CSS 3D transforms (sehr gutes Tutorial mit vielen Beispielen von David DeSandro)
translate3d()-Funktion. Deshalb sind Werte für alle Koordinaten aufgeführt. Wird nur in eine Richtung verschoben, betragen die anderen Werte 0.