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>



<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

Das obige ist der detaillierte Inhalt vonParallax-Hover-Effekt mit TailwindCSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!