Mit einer einzelnen Zeile CSS-Code können Sie jedes Element auf Ihrer Webseite komplett neu ausrichten. Sie können es verschieben, drehen, in der Größe verändern oder in eine andere Dimension verschieben. Das alles ist möglich durch Transformations-Eigenschaften.
Obwohl es sich um eine einzelne Eigenschaft handelt, ist dadurch unglaublich viel Funktionalität möglich. Es kann vielleicht verwirrend sein, wenn Sie alle Punkte betrachten, die zusammenkommen, um das Endergebnis einer CSS-Transformation zu erzeugen. Lassen Sie uns deshalb zunächst einige Grundlagen besprechen und anschließend einige Anwendungsbeispiele genauer betrachten.
Was können Sie mit einer CSS-Transformation erreichen?
Eine CSS-Transformation besteht aus einer oder mehreren Transformationsfunktionen mit jeweils spezifischen Werten, die aufeinander aufbauen.
Die „translate“-Funktion
Die einfachste Funktion, die Sie verwenden können, ist die translate()-Funktion, die sich auf die Positionierung bezieht und Längeneinheiten verwendet, die in allgemeineren Eigenschaften wie margin und top vorkommen.
.my-element {
transform: translate (5px, 10%);
}
In diesem Fall nimmt unser CSS das Element so, wie es ist und verschiebt es nach rechts um 5 px und vergrößert das Element um 10%. Der wichtigste Aspekt ist, dass das Element vor der CSS-Transformation entsprechend dem normalen Layout gerendert wird. Das Element wird nun visuell an seine neue Position gebracht. Das hat aber keinen Einfluss auf die Elemente, die beim Seitenaufbau später erscheinen.
„codepen
Elemente, die eingebettet sind, werden mit dem übergeordneten Element verschoben. Sie können auch verschachtelte Transformationen verwenden.
Mit diesem Code wird das eingebettete Div 15 px rechts von der Stelle erscheinen, an der es sich standardmäßig befinden würde.
Sie können die Funktionen translateX () und translateY () auch so verwenden, dass sie diese getrennt voneinander nutzen oder nur eine Richtung verwenden.
Die „scale“-Funktion
Mit der Funktion scale() können Sie Elemente auch skalieren, um sie zu vergrößern oder zu verkleinern. Diese Funktion akzeptiert eine einzige Zahl, wobei scale(1) keine Änderung darstellt. Eine Zahl zwischen 0 und 1 ist ein Bruchteil der Ausgangsgröße und bewirkt eine Verkleinerung des Elements. Verwenden Sie eine größere Zahl, vergrößern Sie das Element. Es wird dann um den angegebenen Faktor größer als die Normalgröße dargestellt.
transform: scale(1); //original size
transform: scale(2); //twice as big
transform: scale(0.5); //half size
Sie können Elemente auch horizontal oder vertikal skalieren. Mit Hilfe der Funktion scaleX() lässt sich ein Element horizontal dehnen bzw. stauchen. Wenn Sie die Funktion scaleY() verwenden, können Sie das Element vertikal dehnen bzw. stauchen. Besonders interessant wird es, wenn Sie negative Werte einsetzen, denn so können Sie Elemente umzudrehen.
Die Drehfunktionen „deg“, „rad“ oder „turn“
Elemente lassen auch drehen, wenn mit Winkeleinheiten wie deg, rad oder turn arbeiten. Die Elemente bewegen sich im Uhrzeigersinn, wenn Sie positive Werte verwenden. Mit negativen Werten, können Sie die Elemente gegen den Uhrzeigersinn drehen.
Elemente schräg stellen mit der „skew“-Funktion
Die Funktionen skewX() und skewY() bieten Ihnen die Möglichkeit, ein Element zu neigen. Sie verwenden dafür eine ähnliche Winkeleinheit wie für die Rotationen.
Sobald Sie diese Schlüsselfunktionen im Griff haben, können Sie auch die äquivalenten 3D-Transformationen wie translate3d() verwenden oder Elemente perspektivisch bearbeiten. Aber bereits in der 2D-Welt gibt es genügend Möglichkeiten, um interessante CSS-Transformationen zu entdecken.
Eine vollständige Transformation aufbauen
Die Transformations-Eigenschaften allein bieten dir schon viele Möglichkeiten. Bis jetzt haben wir uns aber nur darauf konzentriert, wie Sie einzelne Transformationen anwenden können. Sie können Transformations-Eigenschaften aber auch bündeln und auf die Weise mehrere Funktionen gleichzeitig ausführen, so dass Sie sowohl eine Skalierung als auch eine Drehung mit Transformation anwenden können: Zum Beispiel eine Skalierung auf 200 % in Verbindung mit einer Drehung um 20 Grad – transform: scale(2) rotate(20deg). Sie können eine Funktion auch mehrfach verwenden, z. B. transform: translateX (20px) rotate (. 25turn) translateX (30px).
Diese Struktur ermöglicht Ihnen jede Menge Flexibilität, aber den ersten Gedanken, den viele an dieser Stelle äußern ist: warum werden hier mehrere Eigenschaften zusammengepackt, anstatt mit separaten Eigenschaften zu arbeiten.
Die wichtigste Antwort ist: All diese Transformations-Funktionen gehen auf die Matrixmultiplikation zurück, die ein Kernstück der linearen Algebra ist und auch in der Computergrafik weit verbreitet ist. Wenn Sie im Browser den aktuellen Wert Ihrer Transformation durch das JavaScript getComputedStyle(yourElement) überprüfen, wird es in eine matrix()-Funktion umgewandelt (hierbei handelt es sich um eine weitere Funktion, die Sie verwenden können, wenn Sie sich mit Matrizen auskennen und wissen, wie Sie damit arbeiten können).
„codepen“ > „data-editable=“ wahr „klasse
Außerdem muss man sagen: dass auf diese Weise einzelne Eigenschaften „in der Pipeline sind“ und bequem verfügbar, wenn Sie diese benötigen und einsetzen möchten. Sie folgen jedoch einer vordefinierten Reihenfolge. Sie verlieren auf diese Weise zwar etwas Flexibilität. Wenn die Spezifikationen definiert sind und im Browser dargestellt werden, können Sie einfache Transformationen wie diese ausführen:
.element {
scale: 2;
rotate: 20deg;
}
Warum CSS-Transform nutzen?
Wenn Sie als Webentwickler mit CSS schon so viele andere Möglichkeiten haben, warum brauchen Sie dann überhaupt CSS-Transformationen, um Objekte zu positionieren und zu formatieren?
Es gibt mehrere Gründe, aber der wichtigste ist die Möglichkeit, sie effektiv mit Übergängen und Animationen kombinieren zu können.
Die Transformations-Spezifikation wurde erstmals mit dem Aufkommen der Smartphones ein Thema. Die Benutzer gewöhnten sich daran, dass die Ansichten auf dem Smartphone gedreht werden könnten und an andere kleine Übergänge. Ein Element von einer Position in eine andere zu verschieben war schon lange möglich, z. B. wenn JavaScript verwendet wird und die Margin-Eigenschaft wiederholt modifiziert wird. Es wurde sogar abstrahiert und mit der animate()-Methode populär. Aber es konnte nicht garantiert werden, dass alles glatt und sauber dargestellt wird und die Stilvorlagen sowie das Layout der Seiten nicht neu berechnet werden müssen.
Bei CSS-Transformationen bleibt die ursprüngliche Position der Elemente unverändert, so dass der Browser die Animation optimieren kann, da er keine komplette Neuberechnung durchführen muss. Das transformierte Element bewegt sich in einer eigenen Compositor-Schicht, die der Browser effektiv separat behandeln kann. In Kombination mit einem CSS-Übergang, der die Dauer für eine CSS-Transformation angibt (z. B. transition: transform 400ms) können wir das Element animieren, wenn wir hovern und per JavaScript dabei die Klasse wechseln:
a {
display: inline-block;
transition: transform 250ms;
}
a:hover {
transform: translateY(10px);
}
a.important {
transform: scale(1.2);
}
Jedes Mal, wenn ein Benutzer sich nun über einen Link bewegt, verändert dieser im Verlauf von 250 Millisekunden seine Position um 10 px nach unten. Wenn wir die Klasse in JavaScript modifizieren, um den Ausdruck „important“ hinzuzufügen, sehen wir, wie der Link auf 120 % der ursprünglichen Größe anwächst, ebenfalls im Verlauf von 250 Millisekunden.
Was passiert, wenn wir über einen Link „hovern“, der die Klasse „important“ hat? Sie erwarten (oder hoffen zumindest), dass sich dieser vergrößert und um 10 px verschiebt. Aber in Wirklichkeit gibt es keine translation. Die Werte innerhalb der Transformation werden nicht an frühere Werte angehängt, sondern überschreiben diese einfach. Da die a.important-Regel“ als letztes kommt (sie hat die gleiche Spezifikation wie die a:hover-Regel), ist die “ imporant“-Transformation der Wert, der in diesem Fall verwendet wird.
Damit sich der vergrößerte Link auch beim Hovern um 10 px nach unten verschieben kann, müssten Ihre Styles folgendermaßen aktualisiert werden:
a {
display: inline-block;
transition: transform 250ms;
}
a:hover {
transform: translateY(10px);
}
a.important {
transform: scale(1.2);
}
Dieses Vorgehen kann sehr schnell unpraktisch werden, z. B. wenn Sie verschiedenen Variationen haben und Sie jede mögliche Kombination berücksichtigen müssen. Die bevorstehende Erweiterung der CSS-Transformation, die den Gebrauch individueller Eigenschaften erlaubt, würde den Code deutlich vereinfachen. Das ist aber noch Zukunftsmusik, sodass wir derzeit noch jede Kombination von Transformationen explizit berücksichtigen müssen.
Allerdings ist das, um fair zu bleiben … nicht ganz richtig. Wenn Sie ein anderes, neueres CSS-Feature ausprobieren wollen: die CSS-Variablen, eröffnet Ihnen das eine Menge spannender Möglichkeiten, die jetzt mit Firefox, Chrome, Safari und Edge genutzt werden können.
Bei Verwendung von CSS-Variablen profitieren Sie vom Besten aus den beiden Welten. Einerseits können Sie die gewünschte Transformations-Reihenfolge angeben und andererseits die Eigenschaften individueller herausstellen. Das passt zwar nicht in den Rahmen unserer aktuellen Diskussion, aber es zeigt die Entwicklung der Transformation im Kontext von CSS.
Zusätzlich zur Verwendung von CSS-Übergängen können wir auch geschmeidigere Übergänge programmieren, indem wir CSS-Animationen verwenden. Übergänge sind ein einfacher Mechanismus, um von einem Anfangs- zu einem Endzustand zu animieren. Animationen möglichen Ihnen, komplexer zu werden. Sie benötigen zwei Dinge, um eine CSS-Animation zu erstellen: eine animation-Eigenschaft, die Sie dem Element zuweisen, das Sie animieren möchten und eine @keyframe-Definition, um festzulegen, was passiert.
div.mover {
animation: my-fancy-custom-animation 5000ms;
}
@keyframes my-fancy-custom-animation {
0% {
transform: translate(0px);
}
20% {
transform: scale(.5);
}
50% {
transform: rotate(120deg);
}
80% {
transform: translateX(80px) rotate(120deg)
}
100% {
transform: translateX(0px);
}
}
Es gibt viele weitere Optionen für Animationen in Bezug auf Verzögerungen, Vereinfachung, Iterationszählung und mehr. Unser Beispiel ist eine einfache Form, um eine Animation in Gang zu bringen, bei der wir das Element so spezifizieren, dass eine Animation namens my-fancy-custom-animation in Gang kommt, die eine Dauer von 5.000ms hat.
Anschließend definieren wir, was diese Animation bewirkt, indem wir eine @keyframes-Regel einrichten. Hier erklären wir, was am Anfang, bei der 20% Markierung, bei der 50% Markierung, bei der 80% Markierung und am Ende geschehen soll. Der Browser bestimmt, was dazwischen passiert. Von 0 % bis 20 % animiert er von translate (0) um den Faktor 5. Zwischen 20 % und 50 % wechselt er von dieser Halbskala zu einer 120-Grad-Drehung usw.
Es ist wichtig, das übergeordnete Verhalten in diesem @keyframes zu beachten. Wenn wir von einer Skalierung zu einer Drehung übergehen, sagen wir dem Browser faktisch, dass er von
transform: scale(.5) rotate(0deg) zu transform: scale(1) rotate(120deg) (da 0deg und 1 Standardwerte für Drehen (rotate) bzw. Skalieren (scale) sind) übergehen soll.
Keyframe-Animationen und Transitions sind nicht nur für CSS-Transformationen gedacht, aber insbesondere bei Transformationen profitieren Sie von der Möglichkeit, Übergänge zwischen verschiedenen Zuständen effizienter mittels Browser zu animieren.
Der beste Freund der Transformation
Wir können mit Transformationen sehr viel erreichen. Weitere Möglichkeiten erhalten wir, wenn wir unsere Optionen weiter ausbauen, indem wir eine komplementäre Eigenschaft einführen. Das Transformations-Original erlaubt uns, den Ursprung unserer Transformation zu verändern. Standardmäßig geschieht alles vom Mittelpunkt dieses Elements aus. Wir können das Original zu jedem anderen Punkt bewegen, so wie wir auch die Position des Hintergrunds ändern können. Dadurch ändert sich die Art und Weise, wie Skalierungen, Rotationen und Neigungen dargestellt werden. Bei einer Rotation wird standardmäßig die Drehung um den Mittelpunkt des Elements auf die Drehung um den neuen Referenzpunkt verlagert.
Siehe den Pen
Das visuelle Resultat einer Skalierung können Sie ähnlich beeinflussen, indem Sie auch hier einen anderen Nullpunkt verwenden.
siehe die Klasse
Aber: Bei CSS-Transformation geht es doch nicht nur um Animation, oder?
Animationen können eine Menge Spaß machen, aber Transformationen sind sicherlich nicht auf diesen Bereich beschränkt. Sie können zu grafischen Spielereien und zu sehr kreativen Lösungen führen, insbesondere dann, wenn diese mit anderen CSS-Eigenschaften wie mixing modes, clip-paths und anderen kombiniert werden.
Allerdings kann eigentlich alles, was eine Skalierung, eine Rotation oder eine neue Position erfordert, Werte aus der CSS-Transformation erhalten, ohne die Positionen anderer Elemente zu beeinflussen.
Hier einige konkrete Beispiele zur Inspiration: Was tun, wenn Sie ein rundes Menü haben möchten, in dem die einzelnen Artikel am Rand des Kreises angeordnet sind? Drehen Sie jedes Element und ändern Sie per Transition den Wert der CSS-Eigenschaften, um die Elemente in die richtige Position zu bringen.
li {
transform: rotate(30deg) translateX(30vmin);
}
li:nth-child(2) {
transform: rotate(60deg) translateX(30vmin);
}
/* etc. */
Ohne Transformationen würde dies spezifische Berechnungen für jede Position erfordern, um die x- und y-Werte für die Position zu ermitteln, die dann mit der absoluten Positionierung kombiniert werden müssten. Wenn sich die Abmessungen des Kreises oder die Anzahl der Elemente geändert haben, müssten die Berechnungen überarbeitet werden. Mit CSS-Transformationen können Sie einfacher vorgehen, indem Sie nur den Winkel und den Radius des Kreises angeben und den Browser die Berechnung durchführen lassen.
Vielleicht brauchen Sie etwas Einfacheres, wie einen Rahmen um ein Foto?
Oder schauen Sie sich, wenn Sie Transformationen auf die nächste Ebene heben wollen, einige Optionen an, bei denen wir weder 3D noch die Z-Achse benötigten:
Siehe den Pen
Ganz gleich, ob Sie einfach nur etwas visuell positionieren oder performante Animationen erstellen möchten, Transformations-Eigenschaften können Ihnen bei der Umsetzung helfen. Transformations-Eigenschaften bieten Ihnen sehr viele Optionen. Beginnen Sie damit, diese zu erkunden und auszuprobieren. Sehen Sie selbst, wie Ihnen diese die Programmierarbeit erleichtern.
Sie möchten mehr über CSS-Transformation wissen: Hier finden Sie weitere interessante Informationen zum Thema:
Bildnachweis: Fotolia, Lizenz: Host Europe
Aus dem Englischen: Wolf-Dieter Fiege
- Entdecken Sie die Möglichkeiten der CSS-Transformation - 18. September 2017
