パーツ番号 08-05-05 ・ CSSのみ

3Dフローティングカードスタック

奥行きを持って重なったカードに、ホバーすると一番手前のカードが浮き上がります。お知らせやキャンペーンカードの重なり演出に使えます。

hovercss3d

プレビュー

ソースコード

HTML

<div class="d08-05-05-stage">
          <div class="d08-05-05-stack">
            <div class="d08-05-05-card"></div>
            <div class="d08-05-05-card"></div>
            <div class="d08-05-05-card">NEW</div>
          </div>
        </div>

CSS

.d08-05-05-stage{perspective:700px}
        .d08-05-05-stack{position:relative;width:130px;height:160px;transform-style:preserve-3d}
        .d08-05-05-card{position:absolute;inset:0;border-radius:12px;transition:transform .4s ease,box-shadow .4s ease;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px}
        .d08-05-05-card:nth-child(1){background:#c7d2fe;transform:translateZ(-24px) translateY(12px) rotate(-5deg)}
        .d08-05-05-card:nth-child(2){background:#a5b4fc;transform:translateZ(0) translateY(6px) rotate(3deg)}
        .d08-05-05-card:nth-child(3){background:#6366f1;transform:translateZ(24px) translateY(0) rotate(0);box-shadow:0 10px 24px rgba(99,102,241,.35)}
        .d08-05-05-stack:hover .d08-05-05-card:nth-child(3){transform:translateZ(60px) translateY(-16px) rotate(0)}
        .d08-05-05-stack:hover .d08-05-05-card:nth-child(2){transform:translateZ(10px) translateY(-4px) rotate(3deg)}
        .d08-05-05-stack:hover .d08-05-05-card:nth-child(1){transform:translateZ(-16px) translateY(6px) rotate(-5deg)}

クラス名 .d08-05-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。