CSSアニメーション：くるっとひっくり返るカード

クリックで回転させるカード作った、メモ✍

---

See the Pen Interactive 3D Card Flip Animation by hina1110 (@hina1110) on CodePen.

▼ HTML

<div class="card">
  <div class="cardface cardface__front">front</div>
  <div class="cardface cardface__back">back</div>
</div>

▼ CSS（一部抜粋）

.card {
  position: relative;
  width: 300px;
  height: 400px;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.cardface {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background-color: #262626;
  transition: transform 0.6s;
  backface-visibility: hidden;
}

// 前面
.cardface__front {
  transform: none;
}
// 前面 - ひっくり返ったとき
.is-flipped .cardface__front {
  transform: rotateY(180deg);
}

// 背面
.cardface__back {
  transform: rotateY(180deg);
  color: #262626;
  background-color: #aaaaaa;
}
// 背面 - ひっくり返ったとき
.is-flipped .cardface__back {
  transform: rotateY(360deg);
}

▼ JavaScript

const cards = document.querySelectorAll(".card");

cards.forEach((card) => {
  card.addEventListener("click", () => {
    card.classList.toggle("is-flipped");
  });
});

両面が画像のやつは作ったことあったんだけど、普通にコンテンツ入れたくて！
影もちゃんと回転についてきてくれてかわいいな〜

例

裏面はボタンのクリックで戻るようにした◎

カードゲーム、ボードゲーム関連のなにかに使えるかな？