Cube Rotate (キューブローテート)
別名 3D cube, Cube transition
コンテンツを載せた立方体が回転し、次の面を見せます。
使いどころ
スライダーの切り替え、機能の切り替え
バリエーション
- cube slider
- auto-rotating cube
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にキューブローテート(Cube Rotate)のトランジションを追加してください。3Dキューブ(3D cube)、キューブトランジション(cube transition)とも呼ばれます。
遠近感のある立方体の側面にコンテンツを配置し、「次へ」を押すたびに立方体が縦軸を中心になめらかに回って次の面が正面に来るようにしてください。
キーボードとスクリーンリーダーが届くのは正面の面だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はシンプルなフェードにしてください。