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

CSSだけで作る3Dフリップカードの実装方法を徹底解説

CSSだけでも、マウスホバーすると反転して裏面が見える「フリップカード」を実装できます。名刺やメンバーカードなど、表と裏で異なる情報を見せたい場面で活躍する演出です。

この記事では、実際に動くサンプルコードを交えながら、フリップカードの作り方と仕組みをわかりやすく解説します。

実装例：ホバーで反転するフリップカード

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>Card Flip with Text Example</h1>
<div class="flipCard">
<div class="innerCard">
<div class="frontCard">
<img src="https://cdn.pixabay.com/photo/2016/04/01/11/25/avatar-1300331_960_720.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="cardBack">
<h1>James Anderson</h1>
<p>Architect</p>
<p>Experience: 16 years</p>
</div>
</div>
</div>
<h2>Hover over the above image to see the text</h2>
</body>
</html>

出力結果

上記のコードを実行すると、まず表側にアバター画像が表示されたカードが描画されます。

CSSだけで作る3Dフリップカードの実装方法を徹底解説

この画像にマウスカーソルを合わせると、カードが滑らかに180度回転し、裏面のテキスト情報（氏名・職業・経験年数）が現れます。

CSSだけで作る3Dフリップカードの実装方法を徹底解説

フリップカードの仕組み：押さえるべき3つのCSSプロパティ

1. perspective（遠近感の設定）

親要素である .flipCard に指定した perspective: 1000px は、3D空間の奥行きを定義します。値が小さいほど回転時の遠近感が強調され、大きいほどフラットな回転に近づきます。一般的には600px〜1200px程度が自然な見た目になります。

2. transform-style: preserve-3d（3D空間の維持）

子要素 .innerCard に指定することで、子孫要素も同じ3D空間内で描画されるようになります。これがないと、表裏のカードが正しく立体的に重なりません。

3. backface-visibility: hidden（背面の非表示）

表側（.frontCard）と裏側（.cardBack)の両面に指定します。これにより、各面がユーザーから背を向けた瞬間に非表示になり、反転時に裏面だけが透けて見える不具合を防げます。Safari対応のため -webkit- ベンダープレフィックスも併記しておくのが安全です。

まとめ

フリップカードは、「親要素で遠近感を設定」「内側のラッパーで3D変換を維持」「両面で背面を非表示化」という3段階の構造で実現できます。JavaScript不要でCSSのみ完結するため、チーム紹介ページやサービス一覧など、さまざまなWebサイトのアクセントとして気軽に導入できるでしょう。

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

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

  2. CSSでレスポンシブなカラムカードを作成する方法【コード例付きで解説】

    CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブなカラムカードを簡単に作成できます。本記事では、floatとcalc()、そしてメディアクエリを組み合わせた基本的な実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 レスポンシブカラムカードの仕組み この手法のポイントは、主に以下の3つです。 calc(25% - 20px)：4枚のカードを横並びにするため、各カードの幅を「全体の25%からマージン分を引いた値」として計算しています。 float: left：カードを左に回り込ませることで、横一列に並べています。 @mediaクエリ：画面幅が