3D フリップ切替ボタン
このボタンは、ホバーで前面と背面が rotateY で入れ替わる 3D フリップ部品です。親に perspective を指定して奥行きを作り、前面と背面の 2 枚を position: absolute で重ねています。
解説
このボタンは、ホバーで前面と背面が rotateY で入れ替わる 3D フリップ部品です。親に perspective を指定して奥行きを作り、前面と背面の 2 枚を position: absolute で重ねています。各面に backface-visibility: hidden を付けることで、裏返ったときに反対の面が透けて見えないようにしているのが要点です。前面（通常表示）と背面（ホバー時のメッセージ）が rotateY でくるりと切り替わり、JavaScript なしの CSS だけで動きます。
使う場面
- サブスクや料金ページの「価格を見る」など、二段階で誘う CTA
- キャンペーンボタンで前面に内容・背面に「今すぐ」を出す導線
- カードのアクションで遊び心を持たせたいボタン
表と裏の文言は前面・背面それぞれの要素で自由に変えられ、背景色も面ごとに設定できます。回転速度は両面の transition の秒数で決まります。固定幅・固定高で重ねているため、文言が長いとはみ出すので幅の調整が必要です。立体的に回る動きが負担になる人もいるので、prefers-reduced-motion では回転をやめて色や文字の切り替えだけにするフォールバックを用意すると安心です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
裏面の文字を表示中に裏返さずに見せられますか
通常はホバー時に回転して背面が見えます。各面に backface-visibility: hidden を付けているため、回転前は反対の面が透けません。表と裏の文言はそれぞれの要素で別々に編集できます。
回転の速さや文言を変えられますか
回転速度は前面・背面の transition の秒数で調整できます。文言は flip-btn__front と flip-btn__back の中身を書き換えれば変わり、面ごとに背景色も設定できます。