CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで作る3Dフリップボックスの実装方法をわかりやすく解説

CSSだけでも、マウスオーバー（ホバー）したときに表裏が反転する「フリップボックス」を簡単に実装できます。この記事では、perspective や transform などのCSSプロパティを使った3D反転カードの作り方を、実際のコード例とともに詳しく解説します。

フリップボックスの仕組み

フリップボックスを実現するためには、主に以下のCSSプロパティが重要になります。

  • perspective：親要素に指定することで、3D空間の奥行き（遠近感）を生み出します。
  • transform-style: preserve-3d：子要素が3D空間内に配置されるようにします。
  • backface-visibility: hidden：裏面が反転して見えてしまうのを防ぎます。
  • transform: rotateY(180deg)：Y軸を中心に180度回転させ、カードを反転させます。

実装コード例

それでは、実際のコードを見てみましょう。以下は、ホバー時に反転するフリップボックスの完全なHTML・CSSコードです。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 20px;
    }
    .flipCard {
        background-color: transparent;
        width: 300px;
        height: 300px;
        perspective: 1000px;
    }
    .innerCard {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
    .flipCard:hover .innerCard {
        transform: rotateY(180deg);
    }
    .frontCard, .cardBack {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .frontCard {
        background-color: rgb(124, 225, 243);
        color: black;
    }
    .cardBack {
        background-color: #3329b9;
        color: white;
        transform: rotateY(180deg);
        font-size: 18px;
        font-weight: bold;
    }
</style>
</head>
<body>
<h1>フリップボックスのサンプル</h1>
<div class="flipCard">
<div class="innerCard">
<div class="frontCard">
<h1>表面テキスト</h1>
</div>
<div class="cardBack">
<h1>裏面テキスト</h1>
</div>
</div>
</div>
<h2>上のカードにマウスを合わせると裏面が表示されます</h2>
</body>
</html>

表示結果

上記のコードを実行すると、まず水色の表面が表示されたカードが描画されます。

CSSで作る3Dフリップボックスの実装方法をわかりやすく解説

カードの上にマウスカーソルを合わせると、以下のようにスムーズに反転し、紫色の裏面が表示されます。

CSSで作る3Dフリップボックスの実装方法をわかりやすく解説

ポイントのまとめ

この実装では、.flipCard:hover .innerCard のセレクタによって、ホバー時に内側のカードがY軸方向へ180度回転します。また、transition: transform 0.6s を指定していることで、反転アニメーションが滑らかに動作します。backface-visibility: hidden を忘れると、反転した裏面が鏡像として透けて見えるため注意しましょう。

このテクニックは、サービス紹介カードやチームメンバー紹介など、限られたスペースで多くの情報を見せたい場面で活用できます。ぜひ自分のサイトにも取り入れてみてください。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>