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

いくつかの基本

3D 効果を?qū)g現(xiàn)するには、まずいくつかのことを知る必要があります。それは-

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

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

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

それでは、それがどのように機(jī)能するかを見てみましょう。ここではすべての TailwindCSS クラスについては説明しません。エフェクトを?qū)g行する主要なクラスについてのみ説明します。まず、メインカードの 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 度回転させます。また、視點(diǎn)を 800px に設(shè)定します。その結(jié)果、カードの通常の狀態(tài)は下の畫像のようになります。若干右に回転しています。また、遠(yuǎn)近法を適用したため、カードの右側(cè)が少し歪んでいるのがわかります。それが現(xiàn)実の 3D 世界の仕組みです!

視點(diǎn)を調(diào)整して、カードの変化を確認(rèn)できます。また、パースペクティブがどのように機(jī)能するかについても理解できるでしょう -

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

そして、視點(diǎn)を 10000px に設(shè)定すると、次のようになります。まるで回転していないのではないかと思うほど遠(yuǎn)いです!

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

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

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

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

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

• X
• リンクトイン

以上がTailwindCSS を使用した視差ホバー効果の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。