{ "id": "motion:motion-card-flip-3d", "slug": "motion-card-flip-3d", "kind": "motion", "title": { "ja": "3D カードフリップ", "en": "3D card flip" }, "aiName": "3D card flip on scroll", "summary": { "ja": "カードが裏返って裏面が出る", "en": "A card turns over in 3D to reveal its back" }, "number": 31, "group": "media-depth", "techniques": [ "intersection-observer", "css-3d", "css-transition" ], "rules": [ { "ja": "裏返しは両面を `backface-visibility: hidden` で隠し、裏の面が表の面の裏側に回り込むように重ねる", "en": "Both faces use backface-visibility: hidden and are stacked back to back in the turning box" }, { "ja": "一度裏返ったカードは、スクロールで戻っても表に戻さない", "en": "Once a card has turned, it stays turned when the user scrolls back" }, { "ja": "動きを減らす設定では、裏返さず裏面を見せた状態で止める", "en": "With reduced motion, do not turn the cards; show the back face at rest" } ], "reproduction": { "prompt": { "ja": "3D カードフリップ — 3D card flip on scroll\n\n縦に並んだ 3 枚のカードが、画面の中央に来るたびに裏返る。カードは幅 520px 以下で、表の面は白、裏の面は強調色で、どちらも高さ 320px の角丸。\n裏返しは `rotateY(0 → 180deg)` を 0.7 秒の緩急で行い、親要素に `perspective: 1000px`、裏返す箱に `transform-style: preserve-3d`、両面に `backface-visibility: hidden` を付ける。\nカードは画面の上下 45% を除いた中央の帯に入った時点で一度だけ裏返り、戻らない。3 枚は別々のタイミングで順に裏返る。\n動きを減らす設定では、裏返しを行わず裏面を見せた状態で止める。\nCSS と IntersectionObserver だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 裏返しは両面を `backface-visibility: hidden` で隠し、裏の面が表の面の裏側に回り込むように重ねる\n- 一度裏返ったカードは、スクロールで戻っても表に戻さない\n- 動きを減らす設定では、裏返さず裏面を見せた状態で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-card-flip-3d/demo.html", "en": "3D card flip — 3D card flip on scroll\n\nThree cards stacked vertically each turn over when they reach the centre of the screen. Each card is at most 520px wide, with a white front face and an accent-coloured back face, both 320px tall with rounded corners.\nTurn each card with `rotateY(0 → 180deg)` over 0.7 seconds with an ease-out curve. Set `perspective: 1000px` on the parent, `transform-style: preserve-3d` on the box that turns, and `backface-visibility: hidden` on both faces.\nA card turns once, when it enters the middle band of the screen (the area excluding the top and bottom 45%), and does not turn back. The three cards turn one after another at different moments.\nWith reduced motion, skip the turn and show the back face at rest.\nImplement with CSS and IntersectionObserver only; do not use a library.\n\nDo not drop:\n- Both faces use backface-visibility: hidden and are stacked back to back in the turning box\n- Once a card has turned, it stays turned when the user scrolls back\n- With reduced motion, do not turn the cards; show the back face at rest\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-card-flip-3d/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-card-flip-3d/demo.html", "html": "\n\n\n\n\n31 3D カードフリップ — 3D card flip on scroll\n\n\n\n

3D カードフリップ

3D card flip on scroll

カードが裏返って裏面が出る

SCROLL ↓

\n\n

Section 1

見出しが入ります

本文のダミーです。中央に来たカードが一枚ずつ裏返ります。

\n\n

CARD 01

見出しが入ります

表の本文のダミーです。

BACK 01

裏面が入ります

\n\n

CARD 02

見出しが入ります

表の本文のダミーです。

BACK 02

裏面が入ります

\n\n

CARD 03

見出しが入ります

表の本文のダミーです。

BACK 03

裏面が入ります

\n\n

Section 2

見出しが入ります

本文のダミーです。ここまで読み進めると、三枚とも裏返った状態になります。

\n\n\n\n\n\n\n" } }, "license": "Original", "catalogVersion": 1, "designSchemaVersion": 2, "capabilities": [ "live-preview", "copy-prompt", "get-code" ], "reusePolicy": "construction-reuse", "urls": { "ja": "https://design-vault.pages.dev/designs/motion-card-flip-3d", "en": "https://design-vault.pages.dev/en/designs/motion-card-flip-3d", "json": "https://design-vault.pages.dev/ai/assets/motion-card-flip-3d.json", "designJson": null } }