Zenn
📚

【CSS】CSSで実装するカード反転（カードフリップ）UI

に公開
CSS
flip
tech

仕事でホームページを製作中に、
「文字数が多くて読みづらい」という意見があったので、
タイトルとアイコンをメインに表示し、ホバーすると文章が出る仕組みを実装しました。

重要なポイント

HTML(JSX) の基本構造

<div class="flip">        <!-- 遠近感を与えるコンテナ -->
  <div class="inner">     <!-- 回転するボックス -->
    <div class="front">   <!-- 表側 -->
      タイトルなど
    </div>
    <div class="back">    <!-- 裏側 -->
      コンテンツ
    </div>
  </div>
</div>

原理

  • front は通常の状態
  • back は最初から 180 度回転させておき、背面は backface-visibility: hidden で非表示にする
  • flip コンテナにホバーすると、inner ボックスが 180 度回転する

結果として:

  • front → 180 度回転して背面に移動（非表示）
  • back → 180+180=360 度となり、表側として表示される

CSS (必須設定)

.flip {
  perspective: 1000px; /* 📌 遠近感 */
}

.inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; /* 📌 子要素を3Dで保持 */
  transition: transform 0.6s ease; /* 📌 アニメーション */
}

.flip:hover .inner {
  transform: rotateY(180deg); /* 📌 回転 */
}

.front, .back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden; /* 📌 裏面を見えなくする */
}

.back {
  transform: rotateY(180deg); /* 📌 裏側は常に180度 */
}

よく使う回転パターン

  1. Y軸 回転 (横回転)

    transform: rotateY(180deg);

  2. X軸 回転 (縦回転, 上下反転)

    transform: rotateX(180deg);

  3. 複合回転 (ランダム効果など)

    transform: rotateY(180deg) rotateX(180deg);

例

覚えておきたいポイント

  • perspective → 親要素に設定しないと立体的に見えない
  • transform-style: preserve-3d → 子要素を 3D 空間で維持
  • backface-visibility: hidden → 必須！ これがないと裏面の文字が透けて見える
  • front は通常、back は事前に rotate
  • 回転は inner に適用して「表／裏」を切り替える

Discussion