【簡単・おしゃれ】CSSだけで作るカードホバー拡大＆回転アニメーション

CSS、JavaScript
4,794 文字 約 12 分で読めます

Webサイトでよく見る、カードがふわっと拡大し、裏返しに回転するアニメーション。
「どうやって作るの？」と疑問に思ったことはありませんか？

今回は、CSSだけで作れるカードホバーアニメーションのサンプルコードとカスタマイズのコツを詳しく解説します。
初心者でも理解できるように、1つずつ丁寧に説明しますので、そのままコピーしてブログやポートフォリオサイトに使うことも可能です。

サンプル

See the Pen card by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

基本のHTML構造

まずはHTMLです。5枚のカードを横並びに配置する簡単な例を用意しました。

<body>
  <div class="card-container">
    <div class="card">
      <div class="card-inner">
        <div class="card-front">表</div>
        <div class="card-back">裏</div>
      </div>
    </div>
    <div class="card">
      <div class="card-inner">
        <div class="card-front">表</div>
        <div class="card-back">裏</div>
      </div>
    </div>
    <!-- 省略 -->
  </div>
</body>

ポイントは、カード1枚につき card-inner の中に前面（card-front）と裏面（card-back）を配置している点です。
この構造があることで、CSSだけで回転させることが可能になります。

CSSで立体感とアニメーションを付ける

CSSでは、主に以下の3つのテクニックを使います。

  1. 3D回転（rotateY）
  2. 拡大（scale）
  3. フェードインアニメーション
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f0f0f0;
}

.card-container {
  display: flex;
  gap: 20px;
}

.card {
  width: 120px;
  height: 180px;
  perspective: 1000px;
  position: relative;
  opacity: 0;
  animation: fadeInUp 0.8s forwards;
}

.card:nth-child(1) { animation-delay: 0.2s; }
.card:nth-child(2) { animation-delay: 0.4s; }
.card:nth-child(3) { animation-delay: 0.6s; }
.card:nth-child(4) { animation-delay: 0.8s; }
.card:nth-child(5) { animation-delay: 1s; }

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s, z-index 0s;
  cursor: pointer;
  transform-origin: center;
}

.card:hover {
  z-index: 10;
}

.card:hover .card-inner {
  transform: rotateY(180deg) scale(1.5);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  border-radius: 8px;
}

.card-front {
  background: white;
  color: black;
  transform: rotateY(0deg);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.card-back {
  background: black;
  color: white;
  transform: rotateY(180deg); /* 裏面を回転 */
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(50px) rotateY(0deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateY(0deg);
  }
}
  • perspective は3Dの奥行きを出すプロパティです。
  • transform-style: preserve-3d で子要素の立体感を保持。
  • backface-visibility: hidden で裏面が透けないようにしています。

1. 3D回転（rotateY）

.card:hover .card-inner {
  transform: rotateY(180deg) scale(1.5);
}
  • rotateY(180deg) が Y軸回転 で、カードの裏面を表示するための3D回転です。
  • transform-style: preserve-3d; を card-inner に指定しているのも、この回転で立体感を出すために必要です。

2.拡大

.card:hover .card-inner {
  transform: rotateY(180deg) scale(1.5);
}
  • scale(1.5) が カードのサイズを1.5倍に拡大 する部分です。
  • 拡大率は自由に変更可能で、scale(1.2) や scale(1.3) にすれば控えめにできます。

3.フェードインアニメーションで自然に表示

カードをページ読み込み時に 順番にフェードイン させると、よりおしゃれな印象になります。

.card {
  opacity: 0;
  animation: fadeInUp 0.8s forwards;
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}

.card:nth-child(1) { animation-delay: 0.2s; }
.card:nth-child(2) { animation-delay: 0.4s; }
  • opacity: 0 で最初は透明にしておき、fadeInUp アニメーションで徐々に 不透明になりつつ上に移動 します。
  • animation-delay をカードごとに変えることで、順番に現れる効果が出ます。

カードごとに animation-delay を変えることで、順番に現れる動きを作れます。

ホバー時の拡大・回転を自然にするコツ

実際に触ってみると、隣のカードと重なって不自然に見えることがあります。
これを改善するには、ホバー時に z-indexを調整 します。

.card:hover {
  z-index: 10; /* 他のカードより前に表示 */
}

また、拡大率も自由に変更可能です。

.card:hover .card-inner {
  transform: rotateY(180deg) scale(1.3); /* scaleで大きさ調整 */
}

scale(1.2〜1.5) が一般的で、あまり大きすぎると周囲に干渉してしまいます。

カスタマイズのアイデア

この基本構造を応用すると、さまざまな表現が可能です。

グラデーション背景

.card-front {
  background: linear-gradient(135deg, #f6d365, #fda085);
}

画像をカードに表示

<div class="card-front">
  <img src="sample.jpg" alt="サンプル画像" />
</div>

影の強さや色を調整

box-shadow: 0 15px 25px rgba(0,0,0,0.2);

マグネティックエフェクト風

  • マウスの位置に応じてカードが少し傾く演出もJavaScriptで追加可能。
  • これにより、よりインタラクティブなカードになります。

まとめ

今回紹介したCSSカードアニメーションは、HTMLとCSSだけで作れるシンプルな3D効果です。

  • ページ読み込み時にフェードイン
  • ホバーで拡大＋裏返し
  • z-indexで重なり順を制御

これだけで、Webサイトに動きのあるカードコンテンツを簡単に追加できます。

また、このテクニックはアフィリエイト広告のカード表示にも最適です。
例えば「おすすめ商品」をカードにして、ホバーで商品情報や価格を裏面に表示することで、クリック率を高めることが可能です。

さらに便利なツール・サービス

  • Canva や Figma：カードデザインの元データ作成
  • CodePen：コードを試しながらデザイン調整
  • Adobe Stock や Unsplash：画像素材を活用

これらを活用すれば、さらに魅力的なカードを簡単に作ることができます。

タイトルとURLをコピーしました