3Dで変形するホログラムカードエフェクト

note

ホログラム加工されたトレーディングカードをウェブ上で再現しました。マウスカーソルをホバーすると、カーソルの動きに応じて前後左右に3D変形し、要素の表面にはホログラム風のエフェクトがアニメーションで表示されます。（モバイルデバイスではタップで動作します）

取得したマウスカーソルの位置座標から、カード要素の幅と高さをもとに変形比率を計算し、transformプロパティで3D変形を行います。ホログラムやハイライトのエフェクトはグラデーションによって表現され、変形比率を使って計算した値により背景の表示位置を変化させることで、光が反射しているようなビジュアルを再現します。

ホログラムで採用されている光の色はグラデーションの色味で直接的に表現するのではなく、複数のグラデーションを異なる描画モードで重ね合わせることで、つい触れたくなるような、より自然でリアルな輝きが生まれます。

リアルなデザインとエフェクトを備えたビジュアルやUI要素は、ウェブサイトやアプリケーションにおいて、ユーザー体験を向上させるためにとても有効であり、ユーザーの興味を惹きつける魅力的なコンテンツとなります。