ホバーすると表裏が反転するカードをCSSで実装する方法

マウスホバー時に裏表が反転するカードをCSSで実装してみました。

以下のカードにマウスカーソルを当ててみてください。（SPの場合はタップ）

このアニメーションをCSSのみで実装する方法を紹介していきます！

コピペ用のコード一式と解説を用意しましたので、ぜひ参考にしてみてください。

【コピペ用】ホバーすると表裏が反転するカードのコード一式

以下にHTMLとCSSのコード一式を用意しました。

コードをコピペしてお使いください。

<div class="card">
  <!-- 裏面のコンテンツ -->
  <div class="back">
    <img src="path/sample.jpg" alt="" />
  </div>
  <!-- 表面のコンテンツ -->
  <div class="front">
    <img src="path/sample.jpg" alt="" />
  </div>
</div>

.backの中には裏面のコンテンツを、.frontの中には表面のコンテンツを各自追加してください。

DEMOではトランプカードの画像にしていますが、文字や画像など自由に配置することができます。

/* カード本体 */
.card {
  width: 30%; /* 任意の横幅を指定 */
  position: relative;
  cursor: pointer;
}

/* 擬似要素とpadding-topでカードの高さを指定 */
.card::before {
  content: "";
  display: block;
  padding-top: 142.5%;
}

/* カード内の画像 */
.card img {
  width: 100%;
}

/* カード裏面・表面の共通スタイル */
.card .back,
.card .front {
  transition: all 0.6s;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

/* カード表面のスタイル */
.card .front {
  transform: rotateY(-180deg);
}

/* ホバー時のカード裏面 */
.card:hover .back {
  transform: rotateY(180deg);
}

/* ホバー時のカード表面 */
.card:hover .front {
  transform: rotateY(0);
}

続いてコードの解説をしていきます。

【解説】ホバーすると表裏が反転するカードのコード解説

HTML・CSSの順番で、それぞれのコードを解説していきます。

コードを理解したい・自分でカスタマイズしてみたい方は、ぜひ読み進めてください。

HTML

まずHTMLでは、カードの大枠となるdivを作成し、クラスを付与します。

<div class="card">
  <!-- カード内のコンテンツ -->
</div>

この.cardには、CSSで横幅や高さを指定します。

次にカードの裏面・表面のコンテンツを配置するためのdivをそれぞれ作成します。

<div class="card">
  <div class="back">
    <!-- 裏面のコンテンツ -->
  </div>

  <div class="front">
    <!-- 表面のコンテンツ -->
  </div>
</div>

.backには裏面のコンテンツを、.frontには表面のコンテンツを追加してください。

これでHTMLの解説は終わりです。

CSS

続いてCSSの説明をしていきます。

コードが少し長めなので、

これらの3つに分けて解説していきますね。

カード本体のスタイル

まずはカードの大枠となる.cardのスタイルから。

.card {
  width: 30%; /* 任意の横幅を指定 */
  position: relative;
  cursor: pointer;
}

widthには、任意の横幅を指定してください。

ここではレスポンシブになるように、横幅を%指定しています。

positionはデフォルトのstatic以外を指定してください。

.backと.frontはposition: absoluteで位置指定するので、その基準となるカード.cardにはこの記述が必要となります。

最後に、ホバーした時にポインターを表示するために、cursor: pointerを指定します。

これでカードをホバーすると通常のカーソルではなくポインターが表示されるようになりました。

カードの高さを指定する2つの方法

カードの中に配置する.backと.frontにはposition: absoluteを指定するので、カードの高さが0になってしまいます。

そのため、以下の2つの方法どちらかでカードの高さを指定する必要があります。

1. heightプロパティで高さを指定する

.card {
  height: 500px;
}

まず1つ目は、heightプロパティで高さを指定する方法です。

先ほど設定した.cardクラスに対して高さを指定してください。

固定の高さならpx単位で、高さをブラウザ幅に応じて変更したいならvwなどの単位を使うといいかと思います。

2. 擬似要素とpadding-topで縦横比を指定する

2つ目は、擬似要素とpadding-topを利用して、横幅に対する縦幅の比率を指定する方法です。

.card::before {
  content: "";
  display: block;
  padding-top: 142.5%; /* ここで比率を調整 */
}

まず.cardに対して::before擬似要素を用意します。

そこに上記の記述をし、padding-topの値を調整することでカードに高さを持たせることができます。

ここでは142.5%としていますが、これは“縦幅を横幅の1.425倍にする”という意味になります。

これで横幅に応じて縦幅が一定の比率を保持したまま変動するようになりました。

これに関しては別記事で紹介していますので、気になる方は以下のリンクからご覧ください。

あわせて読みたい

【レスポンシブ対応】padding-topで要素の比率を保持しつつサイズを可変させる方法 レスポンシブ対応をする際に、「ブロック要素の比率を保持したままサイズを可変させたい」という場合がよくありますよね。 img要素だと以下のように指定するだけで、画…

カード裏面・表面のスタイル

続いてはカード裏面・表面のスタイルを見ていきましょう。

/* カード裏面・表面の共通スタイル */
.card .back,
.card .front {
  transition: all 0.6s;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

/* カード表面のスタイル */
.card .front {
  transform: rotateY(-180deg);
}

裏面・表面の大きさは親要素であるカードと同じにしたいので、widthとheightに100%を指定します。

また位置指定に関しては、裏面・表面を同じ位置で重ねる必要があるので、position: absolute, left: 0, top: 0を記述します。

最後に、なかなか見慣れないbackface-visibilityというプロパティがありますね。

これはtransformプロパティなどで要素を変形させた場合に、その裏側を表示するかどうか設定できるプロパティです。

今回の実装では、初期の状態でカードの表面にrotateY(-180deg)を指定しているので、Y軸方向に-180度回転、つまりカードを反転させています。

.card .front {
  transform: rotateY(-180deg);
}

ここにbackface-visibilityにhiddenを指定することで、要素が反転（裏向き）状態のときは非表示にするという効果がかかります。

HTML上で.frontが.backよりも後に配置されているので、本来ならば常に.frontが前面にあるはずですよね。

しかし、.frontにはrotateY(-180deg)がかかっており、さらにbackface-visibilityにhiddenが指定されているので、.frontは非表示になり.backのみが見えているという状態になります。

これに関しては文章では説明しにくいので、開発ツールでbackface-visibilityのチェックを付け外しして違いを確認してみてください。

カードをホバーした時のスタイル

最後に、カードをホバーした時のスタイルを見ていきましょう。

/* ホバー時のカード裏面 */
.card:hover .back {
  transform: rotateY(180deg);
}

/* ホバー時のカード表面 */
.card:hover .front {
  transform: rotateY(0);
}

まず裏面の.backに対して、rotateY(180deg)を指定します。

これで、初期に表示されていたカード裏面が反転された状態になりました。

先ほど説明した通り、backface-visibilityがhiddenになっているため、この状態ではカード裏面は非表示になります。

次に、表面に対してrotateY(0)を指定します。

もともと-180degだったのが0になるので、反転していない状態 = 表向きになります。

これで初期状態では非表示になっていたカード表面が見えるようになりました。

まとめると、以下のようになります。

ここでDEMOをもう一度確認してみましょう。

初期ではカード裏面が、ホバー時にはカード表面が表示されていますね。

transformのrotateYとbackface-visibilityの仕組みを利用して、カードの面を表示/非表示することで実装できました。

これでCSSの解説は終わりです！

【まとめ】ホバーすると表裏が反転するカードをCSSで実装する方法

マウスホバー時に裏表が反転するカードをCSSで実装する方法を紹介しました。

実装手順は、以下の通りです。

CSSのみで簡単に実装できるので、ぜひ試してみてください。