TailwindCSS を使用した視差ホバー効果

カード上の見事な 3D パララックス ホバー エフェクトに魅了されたことはありますか?複雑そうに見えますよね？そう、私もそう思っていましたが、CodePen の作成がいかに簡単かを示す簡単な CodePen デモに出会うまでは。あなたもそれを学びたいですか？飛び込んでみましょう -

いくつかの基本

3D 効果を実現するには、まずいくつかのことを知る必要があります。それは-

• 遠近感: 遠近感プロパティは、ビューアーからオブジェクトがどのくらい遠くに見えるかを制御します。値を低くすると、より強力で劇的な 3D 効果が作成され、値を高くすると、効果がより微妙になります。
• 変換: 変換プロパティを使用すると、要素に 2D または 3D の変更を適用できます。これを使用して、回転、拡大縮小、移動、傾斜などを行うことができます!

コードにジャンプしましょう

最初に最終結果を確認してください。そうすれば、私たちが何を構築しようとしているのか理解できます。カードの上にマウスを移動して、どのように見えるか確認してください。

それでは、それがどのように機能するかを見てみましょう。ここではすべての TailwindCSS クラスについては説明しません。エフェクトを実行する主要なクラスについてのみ説明します。まず、メインカードの div のクラスを見てみましょう -

<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)]

ここでは 2 つのことを行っています。最初に、カードを Y 軸を中心に 10 度回転させます。また、視点を 800px に設定します。その結果、カードの通常の状態は下の画像のようになります。若干右に回転しています。また、遠近法を適用したため、カードの右側が少し歪んでいるのがわかります。それが現実の 3D 世界の仕組みです!

視点を調整して、カードの変化を確認できます。また、パースペクティブがどのように機能するかについても理解できるでしょう -

視点を100pxに変更するとこんな感じです。視点の値を下げるほど、コンテンツはより近くなります - 覚えていますか?

そして、視点を 10000px に設定すると、次のようになります。まるで回転していないのではないかと思うほど遠いです!

次に、ホバーしたときに 3D 錯視がどのように表示されるかを見てみましょう。そして、私たちの目を欺くことがとても簡単であることに驚かれるでしょう!

画像のコードのこの部分を参照してください-

<p>カードの上にマウスを置くと、画像が左に 2.5 レムスライドし、ダイナミックな効果を生み出します。これには、TailwindCSS の Group modifer を使用します。そして、それだけです！ 3D画像回転カードをご用意しております。</p>

<p>次はあなたの番です!これらのクラスを試したり、視点を微調整したり、この効果を他の TailwindCSS ユーティリティと組み合わせて、ユニークなものを作成してください。あなたの作品をコメントやソーシャルメディアで共有することを忘れないでください!</p>

<p>ここでも私を見つけることができます - </p>

• X
• リンクトイン