So erstellen Sie 3D-Designs mit der CSS3-Transformationseigenschaft

Es gibt zwei Dimensionen, wenn es um die CSS3-Transformationseigenschaft geht, 2D und 3D. Beim Animieren werden Transformationen verwendet, um ein Element von einem Zustand in einen anderen zu ändern. Dieses Tutorial dient als Erweiterung dieses Handbuchs zu 2D-Animationen. Ich gebe Ihnen einen Einblick in das 3D-Design und wie Sie durch die Kombination dieser grundlegenden Konzepte fantastische Animationen erstellen können.

3D-Transformationen können ziemlich detailliert sein und komplex werden, wenn viele verschiedene Teile kombiniert werden, daher ist es hilfreich, mit den Grundbausteinen zu beginnen. Einige dieser Konzepte werden Ihnen bekannt vorkommen, aber das „z“ wird bei der Arbeit in 3D neu aussehen. Die 3D-Transformationen erweitern 2D-CSS-Transformationen um die Z-Achse und ermöglichen 3D-Transformationen von DOM-Elementen.

Was ist die Z-Achse?

Es wird viel Bezug auf die z-Achse geben. Es ist leicht, sich das als die gemessene Entfernung von etwas auf Sie zu oder von Ihnen weg vorzustellen. Wenn es sich um einen positiven Wert handelt, liegt er näher bei Ihnen. Wenn es ein negativer Wert ist, ist es weiter von Ihnen entfernt.

Beispiele für 3D-Transformationen

Die grundlegenden Eigenschaften für die 3D-Transformation sind translate3d , scale3d , rotateX , rotateY , rotateZ , perspective und matrix3d ​​. Bei translate3d , scale3d und matrix3d ​​sind mehr Argumente enthalten, da sie Argumente für x, y und z annehmen. Die Scale-Eigenschaft akzeptiert einen Wert für einen Winkel und die Perspektive nimmt ebenfalls einen einzelnen Wert an.

Übersetzen

translateZ()

Dies definiert eine 3D-Translation, indem nur der Z-Achsenwert verwendet wird. Sie erinnern sich vielleicht an translate x und y von 2D translate. Die Idee ist die gleiche wie bei translateX() , translateY() und translateZ() da sie jeweils einen Längenwert annehmen, der das Element um die angegebene Distanz entlang der richtigen Achse bewegt.

In diesem Beispiel würde translateZ(-20px) das Element 20 Pixel vom Betrachter wegbewegen.

Hier ist das Code-Snippet zum Erstellen dieses Beispiels:

 -webkit-transform: translateZ(-20px); -ms-transform: translateZ(-20px); transform: translateZ(-20px);

translate3d()

Die Funktion translate3d() wird verwendet, um die Position des Elements in einem 3D-Raum zu verschieben. Diese Transformation wird erstellt, indem Koordinaten angegeben werden, die definieren, wie weit sie sich in jede Richtung bewegt.

Die Funktion transform: translate3d(20px, -15px, 70px); verschiebt das Bild um 20 Pixel entlang der positiven x-Achse, um 15 Pixel auf der negativen y-Achse und dann um 70 Pixel entlang der positiven z-Achse.

Hier ist ein Beispiel für translate3d :

 -webkit-transform: translate3d(20px, -15px, 70px); -ms-transform: translate3d(20px, -15px, 70px); transform: translate3d(20px, -15px, 70px);

Es ist ziemlich offensichtlich, dass es eine gewisse Überlappung des zweiten Quadrats gibt. Es sieht vielleicht nicht so dramatisch aus wie erwartet, aber das Hinzufügen der perspektivischen Eigenschaft (später in diesem Tutorial) wird helfen.

Drehen

Die Funktion rotate3d() dreht das Element im 3D-Raum um den angegebenen Winkel um die Achse. Dies kann als rotate(x, y, z, angle) geschrieben werden.

rotierenX()

Pixelwerte funktionieren hier nicht, sie müssen in Grad angegeben werden. Die Methode rotateX() dreht ein Element um einen bestimmten Grad um seine x-Achse. Sehen Sie, wie das Rechteck kürzer ist? Es wird um die x-Achse gedreht. Dieses Beispiel zeigt die Drehung um 55 Grad.

 -ms-transform: rotateX(55deg); /* IE 9 */ -webkit-transform: rotateX(55deg); /* Safari */ transform: rotateX(55deg);

rotierenY()

Die Methode rotateY() dreht ein Element um seine y-Achse. Beachten Sie, dass das untere Rechteck nicht so breit ist wie das obere? Es ist gedreht, sodass es nicht so breit erscheint wie das Rechteck oben, da es um 60 Grad gedreht wird.

 -ms-transform: rotateY(60deg); /* IE 9 */ -webkit-transform: rotateY(60deg); /* Safari */ transform: rotateY(60deg);

rotierenZ()

Die Methode rotateZ() dreht ein Element um einen bestimmten Grad um seine z-Achse. In diesem Fall beträgt der Wert 120 Grad.

 -ms-transform: rotateZ(120deg); /* IE 9 */ -webkit-transform: rotateZ(120deg); /* Safari */ transform: rotateZ(120deg);

rotieren3d()

Die Funktion rotate3d(1, -1, 1, 45deg) dreht das Bild entlang der y-Achse um den Winkel 45 Grad. Es ist wichtig zu beachten, dass Sie negative Werte verwenden können, um das Element in die entgegengesetzte Richtung zu drehen.

Da dies komplexer ist als die Einzelachsenspezifikationen, lässt sich rotate3d wie folgt aufschlüsseln: rotate3d(x,y,z,angle) , wobei x=1, y=-1, z=1 und der Rotationswinkel = 45 Grad .

Der Code zum Stylen sieht so aus:

 -ms-transform: rotate3d(1, -1, 1, 45deg); /* IE 9 */ -webkit-transform: rotate3d(1, -1, 1, 45deg); /* Safari */ transform: rotate3d(1, -1, 1, 45deg);

Grundlagen testen

Im Uhrzeigersinn entlang der x-Achse um 45 Grad.

 transform: rotate3d(1, 0, 0, 45deg);

Im Uhrzeigersinn entlang der y-Achse um 45 Grad.

 transform: rotate3d(0, 1, 0, 45deg);

Im Uhrzeigersinn entlang der z-Achse um 45 Grad.

 transform: rotate3d(0, 0, 1, 45deg);

Erwähnenswert ist, dass abhängig von den angegebenen Werten manchmal eine Drehung nicht wahrnehmbar ist; Dies würde beispielsweise nicht auffallen: transform: rotate3d(0, 0, 0, 50deg);

Perspektive

Dies ist wahrscheinlich die „dimensionalste“ Transformation. Hier gewinnen Sie buchstäblich an Perspektive. Wenn Sie 3D-Transformationen auf ein Element anwenden, ohne die Perspektive festzulegen, erscheint der resultierende Effekt nicht dreidimensional. Dies ist etwas, das auch zu den oben genannten Eigenschaften hinzugefügt werden könnte.

Um den 3D-Raum zu aktivieren, benötigt ein Element eine Perspektive. Dies kann auf zwei Arten angewendet werden: mit der transform oder der perspective .

Die transform Eigenschaft würde wie folgt aussehen: transform: perspective(600px); und die Eigenschaft „Perspektive“ würde wie folgt aussehen: perspective: 600px; .

Die folgenden Beispiele werden es zwischen den beiden ändern, also schauen Sie sich den Code genau an.

Der Wert der perspective bestimmt, wie intensiv der 3D-Effekt ist. Stellen Sie sich einen niedrigen Wert als wirklich wahrnehmbar vor, so wie es sich anfühlt, wenn Sie ein großes Objekt betrachten. Bei einem höheren Wert ist die Wirkung weniger intensiv.

Die Position des Fluchtpunkts kann ebenfalls angepasst werden. Es ist eine Erwähnung wert und erfordert viel Experimentieren, da es für die CSS-Perspektive relevant ist. Standardmäßig ist der Fluchtpunkt für einen 3D-Raum in der Mitte positioniert. Verwenden Sie die Eigenschaft perspective-origin, um die Position des Fluchtpunkts zu ändern. Es würde ungefähr so ​​​​aussehen: perspective-origin: 15% 55% .

Skala

scaleZ()

Dies definiert eine 3D-Skalierungstransformation, indem ein Wert für die z-Achse angegeben wird. Da es nur entlang der z-Achse skaliert, werden andere Funktionen benötigt, um den Skalierungseffekt zu demonstrieren. Sehen Sie, wie das Rechteck zum Betrachter zeigt und wie es wirklich die Perspektive zeigt?

Um scale(Z) vollständig zu verstehen, spielen Sie mit dem Wert herum und Sie werden sehen, dass die Perspektive mit höheren Werten „schärfer“ wird.

scale3d(x,y,z)

Die Funktion scale3d() ändert die Größe eines Elements und wird als scale(x, y, z) geschrieben. Wie bei scaleZ ist es nicht ersichtlich, wie die Perspektive vollständig aussieht, es sei denn, sie wird mit perspective verwendet.

Dieses Beispiel verwendet Folgendes:

 -ms-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* IE 9 */ -webkit-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* Safari */ transform: perspective(500px) scale3d(0.8, 2, 0.2);

Eine kurze Anmerkung: Wenn alle drei Koordinaten des Vektors gleich sind, ist die Skalierung einheitlich und es gibt keinen merklichen Unterschied.

 transform: scale3d(1, 1, 1); /* unchanged */ transform: scale3d(2, 2, 2); /* twice the original size */

Matrix3d()

Die 2D-Matrix kann sechs Werte annehmen, während die 3D-Matrix 16 (eine 4×4-Matrix) hat! Es wäre ein sehr langer Beitrag, wenn alle Details behandelt würden. Wenn Sie also dieses Konzept näher untersuchen möchten, empfehle ich dieses interaktive Matrix3D-Experiment auf Codepen.

matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)

So erstellen Sie
Animationen mit 3D-Transformationen

Nachdem nun die Grundlagen behandelt wurden, ist das Erstellen interaktiver Animationen der nächste Schritt. Mithilfe von CSS3-Transformationen und -Übergängen ändern sich Elemente von einem Zustand in einen anderen, indem sie gedreht, skaliert oder eine Perspektive hinzugefügt werden.

Wenn CSS-Animationen neu für Sie sind, ist es wichtig zu wissen, dass ein transformiertes Element ohne einen Übergang abrupt von einem Zustand in einen anderen wechseln würde. Um dies zu verhindern, kann ein Übergang hinzugefügt werden, mit dem Sie die Änderung steuern und ihr ein glatteres Aussehen verleihen können.

So erstellen Sie einen Kartenumschlag

Wer spielt nicht gerne Karten? Dieses Beispiel zeigt eine doppelseitige Karte und Sie können beide Seiten sehen, indem Sie sie mit einer Transformation umdrehen. Wenn Sie sich das body -Tag ansehen, kommt ein Großteil des Effekts von der perspective Eigenschaft. Es ist auf 500px eingestellt. Ein niedrigerer Wert wie 100px sieht sehr „schief“ aus.

Hier ist der Start-HTML:

 <div class="wrapper"> div class="side-one"></div> <div class="side-two"></div> </div>

Das CSS macht es möglich:

 body { -webkit-perspective: 500px; perspective: 500px; } .wrapper { -webkit-transition: all 1s ease-in; transition: all 1s ease-in; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; margin: 100px auto; width: 250px; height: 250px; cursor: pointer; } .wrapper div { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; border-radius: 10px; background-position: 50% 50%; background-size: 150px; background-repeat: no-repeat; box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4); color: #FFF; text-align: center; text-shadow: 0 1px rgba(0,0,0,.3); } .side-one { z-index: 400; background: #50c6db url(image.png); } .side-two { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); background: #ef4e65 url(image.png); } .wrapper:hover { -webkit-transform: rotateY(-1turn); transform: rotateY(-1turn); }

Diese finden Sie auf Codepen.

Wenn Sie mit Transformationen noch nicht vertraut sind, könnte dies für Sie interessant aussehen: transform: rotate(1turn); Diese Einheit ist perfekt für unsere Karte, denn eine „Drehen“-Einheit ist genau das, wonach sie sich anhört, nämlich ein vollständiger Kreis.

Ich habe auch etwas Easing verwendet, um eine benutzerdefinierte Art des Drehens zu erstellen. Dies wird mit transition: all 1s ease-in; .

Eine weitere 3D-Eigenschaft im Snippet ist transform-style: preserve-3d; . Indem dies eingeschlossen wird, kann das Element im dreidimensionalen Raum „schwingen“, anstatt beim übergeordneten Element zu bleiben.

So erstellen Sie Text mit einem 3D-Effekt

Dieses Beispiel wurde von einem alten Filmplakat inspiriert. Es gibt so viele verschiedene Schriftarten, die großartiges CSS-Styling verwenden können, sodass einzigartige Schrifteffekte definitiv möglich sind. Dieser Text verwendet rotate3d und transform3d , um ihm eine einzigartige Transformation zu geben.

Das HTML ist ziemlich einfach:

 <div class="container"> <div class="text-wrapper"> <div class="text">New York City</div> </div> </div>

Hier ist das grundlegende CSS:

 .container{ -webkit-perspective: 600; } .text { transform: rotate3d(2, 2, .5, 22deg)translate3d(100px, 0px, 0px); }

Ausführlicheres CSS und Beispiel finden Sie auf Codepen.

Hoffentlich verleihen CSS-3D-Transformationen Ihren Designs eine neue Dimension. Die Nutzung der Perspektive ist eine großartige Möglichkeit, Elemente dimensionaler erscheinen zu lassen. In Kombination mit Übergängen ergeben sich viele Möglichkeiten beim Erstellen von Animationen.