Parallax-Hover-Effekt mit TailwindCSS

Waren Sie schon einmal fasziniert von diesen atemberaubenden 3D-Parallaxen-Hover-Effekten auf Karten? Sie sehen komplex aus, oder? Nun, das dachte ich auch, bis ich auf eine einfache CodePen-Demo stieß, die zeigte, wie einfach es ist, eine zu erstellen. Willst du es auch lernen? Lass uns eintauchen-

Einige Grundlagen

Um den 3D-Effekt zu erzielen, müssen wir zunächst einige Dinge wissen. Das sind-

• Perspektive: Die Eigenschaft „Perspektive“ steuert, wie weit das Objekt vom Betrachter entfernt erscheint. Ein niedrigerer Wert erzeugt einen stärkeren, dramatischeren 3D-Effekt, während ein höherer Wert den Effekt subtiler macht.
• Transformieren: Mit der Transformationseigenschaft können Sie 2D- oder 3D-Änderungen auf ein Element anwenden. Sie können damit drehen, skalieren, verschieben, neigen und mehr!

Kommen wir zum Code

Überprüfen Sie zuerst das Endergebnis, damit Sie verstehen, was wir aufbauen wollen. Bewegen Sie den Mauszeiger über die Karte und sehen Sie, wie sie aussieht?

Jetzt wollen wir sehen, wie es funktioniert. Ich werde hier nicht jede TailwindCSS-Klasse erklären. Wir werden nur die Hauptklassen besprechen, die den Effekt erzielen. Sehen wir uns zunächst die Div-Klassen der Hauptkarte an –

<div>



<p>Look at this part here-<br>
</p>

<pre class="brush:php;toolbar:false">[transform:perspective(800px)_rotateY(10deg)] hover:[transform:perspective(800px)_rotateY(-10deg)]

Wir machen hier zwei Dinge. Zunächst drehen wir die Karte um 10 Grad um ihre Y-Achse. Und stellen Sie auch die Perspektive auf 800 Pixel ein. Infolgedessen sieht der Normalzustand der Karte wie im Bild unten aus. Es ist leicht nach rechts gedreht. Und da wir etwas Perspektive angewendet haben, können Sie sehen, dass die rechte Seite der Karte etwas schief ist. So funktioniert eine echte 3D-Welt!

Wir können die Perspektive anpassen, um die Änderungen in der Karte zu sehen. Und Sie erhalten auch eine Vorstellung davon, wie die Perspektive funktioniert –

So sieht es aus, wenn wir die Perspektive auf 100 Pixel ändern. Je mehr wir den Perspektivwert verringern, desto näher ist der Inhalt – erinnerst du dich?

Und das erhalten wir, wenn wir die Perspektive auf 10000 Pixel einstellen. Bisher scheint es, als gäbe es überhaupt keine Rotation!

Jetzt werden wir sehen, wie es eine 3D-Illusion erzeugt, wenn wir darüber schweben. Und Sie werden überrascht sein, dass es so einfach ist, unser Auge zu täuschen!

Siehe diesen Teil des Codes des img-

<img  alt="Parallax-Hover-Effekt mit TailwindCSS" >



<p>Wenn Sie mit der Maus über die Karte fahren, verschiebt sich das Bild um 2,5 Rem nach links, wodurch ein dynamischer Effekt entsteht. Hierzu verwenden wir den Group-Modifer von TailwindCSS. Und das ist es! Wir werden eine rotierende 3D-Bildkarte haben.</p>

<p>Jetzt bist du dran! Experimentieren Sie mit diesen Klassen, optimieren Sie die Perspektive oder kombinieren Sie diesen Effekt mit anderen TailwindCSS-Dienstprogrammen, um etwas Einzigartiges zu schaffen. Vergessen Sie nicht, Ihre Kreationen in den Kommentaren oder in den sozialen Medien zu teilen!</p>

<p>Du kannst mich auch hier finden- </p>

• X
• LinkedIn