Cube Rotate Button

【対象要素】
- サイト内のボタン1点（CTA・リンクボタン・フォームの送信ボタン等）に適用する

【演出内容】
- ホバーするとボタンが立方体の一面のように横軸で回り込み、次の面が手前に出てくる
- 面と面の間に厚みがあり、板ではなく立体が転がったように見せる

【品質要件】
- 回転は0.5秒前後。回転軸は上下方向に固定する
- 待機状態で、次に出てくる面の色が上端や隅から見えていないこと
- prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする
- ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない

[Target element]
- Apply to a single button on your site (a CTA, a link button, a form submit button, etc.)

[Motion]
- On hover the button rotates around its horizontal axis like one face of a cube, bringing the next face to the front
- There is thickness between the faces, so it reads as a solid object turning rather than a flat board

[Quality requirements]
- The rotation takes about 0.5s around a fixed horizontal axis
- At rest, the color of the incoming face must not be visible at the top edge or the corners
- When prefers-reduced-motion is set, disable the animation and fall back to a static state change
- Never reduce the legibility of the label; do not create a moment where the text cannot be read