【CSS】 2枚の画像を紙の表裏をペラッとめくるように切り替えるアニメーション

2枚の画像を用意し、クリックで紙の表裏をペラッとめくるようにアニメーションで切り替える方法。楽しい視覚効果を、HTMLとCSSで実装します。

2枚の画像を用意

表
表の画像
裏
裏の画像

切り替えたい表と裏の2枚の画像を用意します。サイズは違っても構いませんが、アスペクト比を合わせておく必要があります。

普通に切り替える

通常の切り替え

これはシンプルに画像Aと画像Bをクリックごとに切り替えるパターンです。当然ながらオモテウラ感はありません。

【JavaScript】触れる・クリックの両方で2枚の画像を切り替える方法【PC・スマホ対応】

続きを見る

ペラッと紙をめくるように切り替える

ペラッと切り替え

表 裏

これは2枚の画像をカードの表裏をひっくり返すように切り替えるパターンです。

デフォルトは表の画像を表示し、クリックすると回転しながら裏の画像にチェンジ。もう一度クリックすると、表の画像に戻ります。

アスペクト比だけでなく、2枚の画像の形状（縁取りなど）も合わせておくと、よりオモテウラ感が出せます。

ソースコード

HTMLコード

<div class="flip-container" onclick="this.classList.toggle('is-flipped')" style="max-width: 300px;">
  <div class="flip-image">
    <img src="omote.jpg" alt="表">
    <img src="ura.jpg" alt="裏">
  </div>
</div>

画像のサイズはmax-width: 300px;の数字をイジると調整できます。

スマホなどの画面が小さいデバイスにおいて、max-width:◯◯px;に設定した値がデカい場合は、画面の横幅に合わせて自動的にリサイズされます。

CSSコード

.flip-container {
  width: 100%;
  perspective: 1000px;
  cursor: pointer;
}

.flip-image {
  width: 100%;
  transition: transform 0.6s ease-in-out;
  transform-style: preserve-3d;
  position: relative; 
}

.flip-image img {
  width: 100%;
  height: auto; 
  object-fit: contain;
  display: block;
  backface-visibility: hidden;
}

.flip-image img:nth-child(1) {
  transform: rotateY(0deg);
}

.flip-image img:nth-child(2) {
  transform: rotateY(180deg);
  position: absolute; 
  top: 0;
  left: 0;
}

.flip-container.is-flipped .flip-image {
  transform: rotateY(180deg);
}

-CSS