こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回はCSSアニメーションを使って、まるでカードが立体的に積み重なっていくように見える「3Dカードアニメーション」をご紹介します。
Webデザインの演出として、UIコンポーネントやポートフォリオ、ギャラリーサイトなどで応用しやすい表現です。
「3Dに見えるけど、CSSだけでできるの？」と思う方も多いですが、perspective（遠近感） と transform: translateZ() / rotateY() を活用することで、意外と簡単に表現できます。
3Dカードアニメーションの基本仕組み
CSSの perspective プロパティを親要素に設定し、子要素（カード）を transform: translateZ() や rotateY() で動かすことで、奥行きを表現できます。
複数のカードを配置し、それぞれにズレを加えると「重なっていく」ようなアニメーションが可能になります。
ポイント
perspective で3D感を出す
transform-style: preserve-3d を忘れずに
translateZ() を活用して前後に動かす
transform-style: preserve-3d を忘れずに
translateZ() を活用して前後に動かす
実装サンプルコード
以下のコードをコピペするだけで「カードが重なる」3D風アニメーションを試せます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
応用のアイデア
- ポートフォリオで作品カードを重ねる演出
- 商品一覧のサムネイルを立体的に表示
- ヒーローヘッダーでブランドのキービジュアルを重ねる
シンプルな表現ですが、使い方次第で一気にサイトの印象をリッチにできます。
まとめ
CSSの perspective と transform を使えば、JavaScriptなしでも3Dっぽいカードアニメーションを作ることができます。
Webサイトに動きを取り入れたい方は、ぜひ試してみてください。
satokotadesignキャンペーン実施中！
