Webサイトのデザインに「深み」と「驚き」を。 CSSの進化により、画像を使わなくてもテキストを立体的に表現できるようになりました。
この記事では、モダンなWebデザインで人気の「3D＆パース（遠近感）」を取り入れたCSSアニメーションを5つ紹介します。 ただ立体的に見えるだけでなく、待機中の心地よい浮遊感と、ホバー時のインタラクティブな変化を組み合わせた実用的なコードです。SWELLですぐに実装できます。
3D Swing Flip（スイング・フリップ）
看板が風で揺れるように、Y軸を中心にゆっくりとスイングし続けます。ホバーすると、勢いよくX軸回転で一回転し、ピタッと正面を向きます。
See the Pen 3D Swing Flip by BaseKENT (@basekent) on CodePen.
調整方法
- 揺れ幅 (
15deg):@keyframes swingY内の角度を変更すると、揺れの大きさが変わります。 - 奥行き感 (
perspective: 1000px): 数値を小さくする（例:500px）と、遠近感が強調されてダイナミックになります。
Layered Depth Shadow（レイヤード・デプス）
複数のテキストシャドウをずらして重ねることで、層のような奥行きを表現します。待機中は影が呼吸するように伸縮し、ホバーで影がパキッと離れて立体感が増します。
See the Pen Layered Depth Shadow by BaseKENT (@basekent) on CodePen.
調整方法
- 影の色と数:
text-shadowの色や行数を増減させることで、層の厚みや雰囲気を調整できます。 - 浮き上がる距離: ホバー時の
translateY(-5px) translateX(-5px)の数値を大きくすると、より高く浮き上がります。
Isometric Float（アイソメトリック・フロート）
斜め上から見下ろしたような「アイソメトリック（等角投影）」視点の表現です。待機中は立体的な状態で浮遊し、ホバーすると正面を向いてフラットに戻ります。
See the Pen Isometric Float by BaseKENT (@basekent) on CodePen.
調整方法
- 角度: 初期状態の
rotateX,rotateY,rotateZの値を変更すると、見る角度が変わります。 - 浮遊範囲:
@keyframes isoFloatingのtranslateY(-10px)を変更すると上下の動き幅が変わります。
Pop-out Perspective（ポップアウト・パース）
待機中は画面の奥の方で小さく回転しており、ホバーすると強力な遠近感を伴って手前に飛び出してきます。ダイナミックな視線誘導に最適です。
See the Pen Pop-out Perspective by BaseKENT (@basekent) on CodePen.
調整方法
- 飛び出し距離 (
translateZ(100px)): ホバー時の数値を大きくすると、より手前に迫ってきます。 - 奥の位置 (
translateZ(-100px)): キーフレーム内の数値を小さく（マイナスを大きく）すると、より奥に配置されます。
3D Text Wave（3Dテキスト・ウェーブ）
テキストが波打つように、文字単位で奥と手前を行き来します。待機中はこの穏やかな波が続き、ホバーすると波が止まり、文字が少し傾いて静止します。 ※この表現には、一文字ずつ <span> タグで囲む必要があります。
See the Pen 3D Text Wave by BaseKENT (@basekent) on CodePen.
調整方法
- 波の大きさ:
@keyframes wave3DのrotateXとtranslateZの数値を変更して調整します。 - 波の速さ (
0.1s): 各span:nth-childのanimation-delayの間隔を広げると、波がゆっくり伝わります。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
