Vercelの3Dブックコンポーネントの再現

最近、さまざまなウェブサイトでこの洗練された3Dブックコンポーネントに気づき、遭遇するたびに目を引かれていました。まるで画面から手で掴むことができるかのような、本物の深みと次元を持っているように見えるのが魅力的でした。ついに好奇心に負けて、袖をまくり上げて、それがどのように構築されているかを正確に解明することにしました。

調査

ブラウザでコンポーネントを検査し、一つ一つの部品を分解し始めました。私が発見したのは、エレガントにシンプルでありながら、見事に実行されたものでした。全体の3D効果は、物理的な本の異なる部分を表す3つの主要なHTML要素だけを使用して実現されていました。

• 表紙 - ユーザーが対話する主要な面
• ページ - 本の厚みを作り出すページの厚い束
• 裏表紙 - 幻想を完成させる背後の面

魔法はCSSトランスフォーム、具体的にはrotate3d()関数を通じて起こります。各平面は3D空間に配置され、回転されて、画面上に本物の本が置かれているかのような説得力のある幻想を作り出します。表紙は平らに置かれ、ページはホバー時に回転して本の厚みを見せ、裏表紙は3Dフォームを完成させるために配置されます。

デザインシステムに従う

車輪の再発明をするのではなく、VercelがGeistデザインシステムで使用しているのとまったく同じコンポーネントインターフェースに従うことにしました。

コンポーネントは、本の表紙の色、タイトル、テクスチャ、およびさまざまなスタイリングオプションのプロップを受け入れます。

結果

トランスフォームの原点、遠近法の値、および配置をいくつか実験した後、元の視覚的インパクトに忠実にコンポーネントを再現することに成功しました。鍵は、3つの平面がどのように連携して深みを作り出し、滑らかなアニメーションとホバー効果を維持するかを理解することでした。

コンポーネントはユーザーのインタラクションに美しく応答し、圧倒されることなく3Dの幻想を高める微妙な回転と影があります。

以下はコンポーネントのプレビューです。