{ "id": "motion:motion-perspective-tilt", "slug": "motion-perspective-tilt", "kind": "motion", "title": { "ja": "パースペクティブ", "en": "Perspective tilt" }, "aiName": "Perspective tilt reveal", "summary": { "ja": "傾いた面が起き上がって正面を向く", "en": "A tilted panel rises and turns to face the viewer" }, "number": 32, "group": "media-depth", "techniques": [ "scroll-progress", "css-3d" ], "rules": [ { "ja": "面は下端を軸に起き上がり、箱からはみ出して大きくならない", "en": "The panel pivots on its bottom edge and never grows past its box" }, { "ja": "動くのは transform と opacity だけで、影は不透明度で濃さを変える", "en": "Only transform and opacity animate; the shadow changes density through opacity" }, { "ja": "動きを減らす設定では、面を正面に向けた状態で表示する", "en": "With reduced motion, show the panel facing forward with no tilt" } ], "reproduction": { "prompt": { "ja": "パースペクティブ — Perspective tilt reveal\n\n画面ほどの大きさの UI 風の面（幅は最大 720px、縦横比 16:10）を、手前に倒れた状態から起き上がらせる。面は `perspective: 1200px` の親の中で、下端を回転の軸（`transform-origin: 50% 100%`）にして置く。\n面が画面の下端から入るとき `rotateX(55deg)` で傾き、`translateZ(-160px)` だけ奥へ下がっている。スクロールに合わせて `rotateX` を 55deg から 0 へ、`translateZ` を -160px から 0 へ戻し、正面を向いたところで止める。\n面の下に置いた影は、傾いている間は濃く（不透明度 1）、起き上がるにつれて薄く（0.35）し、横幅も 100% から 70% へ狭める。\n面は 3 枚を 3 つの区画に置き、区画の高さは 70vh。進み具合は `--p` を 0.1〜0.6 の範囲で 0〜1 に写した値から作る。\nCSS と素の JavaScript だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 面は下端を軸に起き上がり、箱からはみ出して大きくならない\n- 動くのは transform と opacity だけで、影は不透明度で濃さを変える\n- 動きを減らす設定では、面を正面に向けた状態で表示する\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-perspective-tilt/demo.html", "en": "Perspective tilt — Perspective tilt reveal\n\nA UI-style panel about the size of the screen (up to 720px wide, 16:10) rises from lying tilted toward the viewer to facing forward. Place it inside a parent with `perspective: 1200px`, and pivot it on its bottom edge with `transform-origin: 50% 100%`.\nAs the panel enters from the bottom of the viewport it is tilted with `rotateX(55deg)` and pushed back by `translateZ(-160px)`. As the user scrolls, return `rotateX` from 55deg to 0 and `translateZ` from -160px to 0, and hold it flat once it faces forward.\nPlace a shadow under the panel that is dark (opacity 1) while it is tilted and fades to 0.35 as it rises, narrowing from 100% to 70% of its width.\nPut three panels in three sections, each 70vh tall. Drive the progress from `--p`, remapped so that 0.1 to 0.6 becomes 0 to 1.\nImplement with CSS and plain JavaScript only; do not use a library.\n\nDo not drop:\n- The panel pivots on its bottom edge and never grows past its box\n- Only transform and opacity animate; the shadow changes density through opacity\n- With reduced motion, show the panel facing forward with no tilt\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-perspective-tilt/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-perspective-tilt/demo.html", "html": "\n\n\n\n\n32 パースペクティブ — Perspective tilt reveal\n\n\n\n
\n
\n

32

\n

パースペクティブ

\n

Perspective tilt reveal

\n

傾いた面が起き上がって正面を向く

\n

SCROLL ↓

\n
\n
\n\n
\n
\n
\n

Section 1

\n

見出しが入ります

\n

本文のダミーです。下の面が、手前へ倒れた状態から起き上がります。

\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n

Section 2

\n

見出しが入ります

\n

本文のダミーです。次の面は、別の段の中で同じように起き上がります。

\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n

Section 3

\n

見出しが入ります

\n

本文のダミーです。最後の面が起き上がると、この段落が続きます。

\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\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-perspective-tilt", "en": "https://design-vault.pages.dev/en/designs/motion-perspective-tilt", "json": "https://design-vault.pages.dev/ai/assets/motion-perspective-tilt.json", "designJson": null } }