ボタンが立体的に回転して「裏面」が現れる演出は、ユーザーに一瞬「え、動いた？」と思わせる体験を生みます。カードをめくる・コインを弾く・フォームの送信が完了する——そういった「反転」という動作が持つ直感的な気持ちよさを、CTAボタンに乗せることができます。perspective と rotateY の組み合わせで実現する3Dフリップは、実装の仕組みを一度理解してしまえば、バリエーションが広がるテーマでもあります。
この記事では、CSSだけで作れるフリップ系ボタンを5パターン紹介します。JavaScriptは一切使わず、transform-style: preserve-3d と backface-visibility: hidden を組み合わせた純CSS実装です。コピペで使えるコードと、自分好みに調整するポイントも一緒にまとめているので、WordPressやポートフォリオサイトにそのまま活用できます。
Classic Y-Flip（クラシック・Yフリップ）
左右方向に180度回転して裏面が現れる、フリップ系の基本パターンです。表面にボタンラベル、裏面に別のテキストやアイコンを持たせることで、ホバーひとつで情報を切り替えられます。「Button」→「Click!」のようにアクションの前後を表裏で表現すると、自然なインタラクションになります。
perspective: 1000px を親要素に設定することで奥行き感が生まれ、rotateY(180deg) のホバーで左右フリップします。表と裏それぞれに backface-visibility: hidden を指定することで、回転中に反対の面が透けて見えることを防ぎます。ポートフォリオの「作品を見る」ボタンや、ランディングページの主役CTAに向いているパターンです。
See the Pen Classic Y-Flip by BaseKENT (@basekent) on CodePen.
調整方法
- 回転速度:
transition: transform 0.5s easeの0.5sを変えることでフリップのテンポが変わります。0.3sでテキパキ、0.8sでゆっくりめくれます - 奥行き感:
perspective: 1000pxの数値を小さくするほど遠近感が強くなり、立体感が増します - 表裏の色:
.frontと.backのbackgroundを変えると表裏でテーマを変えられます
Vertical X-Flip（バーティカル・Xフリップ）
上下方向に回転するフリップです。横回転に比べて「ページをめくる」「カレンダーをめくる」ような動きに近く、縦方向のレイアウトとの相性が良いパターンです。rotateX(180deg) で上下にひっくり返り、cubic-bezier で動きに少しクセをつけています。
横スクロールのメニューや、縦に並んだカードのCTAボタンとして使うと、周囲の動きと自然に噛み合います。緑系の落ち着いた配色にしていますが、フォーム送信の「確認する」→「送信済み」という流れにも使いやすいパターンです。
See the Pen Vertical X-Flip by BaseKENT (@basekent) on CodePen.
調整方法
- イージング:
cubic-bezier(0.4, 0, 0.2, 1)をease-in-outに変えるとよりスムーズになります。アクセントをつけたい場合はcubic-bezier(0.34, 1.56, 0.64, 1)でバウンス感が出ます - ボタンサイズ:
width: 140pxheight: 48pxを変更して用途に合わせてください - 角丸:
border-radius: 6pxを50pxにするとピルボタン型になります
Fast Snap Flip（ファスト・スナップフリップ）
transition: 0.18s という短い時間と、行き過ぎてから戻るような cubic-bezier を組み合わせた、パチンとスナップするフリップです。「完了した」「選択された」という即時フィードバックの印象が強く、フォームのサブミットボタンや、チェックボックス的な役割を持つボタンに向いています。
素早い反応が「押したことが伝わる」感覚を作ります。0.6, -0.3, 0.4, 1.3 というカーブにより、回転がわずかにオーバーシュートしてから着地する動きになっています。通常の ease と比べると、1回クリックするだけで「これ気持ちいいな」と感じてもらいやすいパターンです。
See the Pen Fast Snap Flip by BaseKENT (@basekent) on CodePen.
調整方法
- スナップ感の調整:
cubic-bezier(0.6, -0.3, 0.4, 1.3)の第2引数（-0.3）をさらにマイナスにするほどオーバーシュートが大きくなります - 速度:
0.18sを0.25sにすると少し余裕のある動きになります - 裏面のメッセージ:
.backのテキストを「送信中…」「完了」などに変えてステータス表示として使えます
Color Contrast Flip（カラーコントラスト・フリップ）
表面を白背景・黒テキスト、裏面を黒背景・白テキストで作った、ハイコントラストなフリップです。フリップという動作に加えて「色が完全に反転する」視覚インパクトがあり、ユーザーの目を引きとめます。box-shadow: 4px 4px 0 のフラットシャドウが、表裏ともに存在感を持たせています。
グラフィックデザイン系・アート系のポートフォリオや、クリエイター向けのサービスサイトとの相性が良いパターンです。モノクロの配色なので、どんなカラースキームのサイトにも浮かずに使えます。「シンプルに見えるのに動かすと印象的」という意味で、使いどころが広い1本です。
See the Pen Color Contrast Flip by BaseKENT (@basekent) on CodePen.
調整方法
- シャドウの方向:
box-shadow: 4px 4px 0 #111の数値を変えてシャドウの角度を調整できます - カラーを追加: モノクロ以外に使いたい場合、
.frontを好みの色に変えて.backを同系色の濃い色にするとまとまります - ボーダーの太さ:
border: 2px solid #111の2pxを3pxにするとよりグラフィカルな印象になります
Diagonal Flip（ダイアゴナル・フリップ）
rotateY と rotateX を組み合わせた斜め方向へのフリップです。縦でも横でもない「斜め」に倒れる動きは、他の4パターンと並べると一番異質で、視覚的な驚きがあります。グラデーションを使ったパープル×ピンク系の配色と組み合わせることで、動きと見た目の両方で個性を出せます。
transform: rotateY(140deg) rotateX(30deg) という角度設定がポイントで、完全に180度反転させずに「途中で止まる」感覚を演出しています。ランダム性を感じさせるアート系の演出、ゲームUI、音楽系サービスなど、個性が求められる場面で使いたいパターンです。
See the Pen Diagonal Flip by BaseKENT (@basekent) on CodePen.
調整方法
- 回転角度の調整:
rotateY(140deg) rotateX(30deg)の数値を変えると、倒れる方向と角度が変わります。rotateY(90deg) rotateX(90deg)にするとコーナーから倒れる動きになります - グラデーションの色:
linear-gradient(135deg, #8b5cf6, #ec4899)の色コードを変えてテーマに合わせてください - 速度:
0.6sを0.4sに縮めるとテンポ良く、0.9sにするとゆっくり倒れる動きになります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
