カードフリップをCSSで実装

演出でカードを表と裏でくるんとフリップさせたいという要望があったのでメモ。

下記のページのサンプルが一番よかったです。

TRANSFORMERS TOP TRUMPS

紹介されていたサンプルをシンプルにしたHTMLとCSSです。

• HTML

<div class="card">
  <div class="card-container">
    <div class="card-item card-front">
      <img src="img_card_front.png" alt="">
    </div>
    <div class="card-item card-back">
      <img src="img_card_back.png" alt="">
    </div>
  </div>
</div>

• CSS

.card-container {
  -webkit-perspective: 1000;
}
.card-container:hover .card-item {
  -webkit-transform: rotateY(180deg);
}
.card-container:hover .card-front {
  z-index: 1;
}
.card-container:hover .card-back {
  z-index: 2;
}
.card-item {
  position: relative;
  -webkit-transform-style: preserve-3d;
  transition: all 0.4s ease-in-out;
}
.card-front {
  position: relative;
  z-index: 2;
  -webkit-backface-visibility: hidden;
}
.card-back {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  -webkit-transform: rotateY(180deg);
}

何が一番よかったのか

カードフリップのサンプルは他にもいろいろあったのですが、上記のサンプルの何が一番よかったかというと、transform3dあたりの指定をわざとベンダープレフィックスだけにすることで、IE11以下では3dの演出はでてこなくてもカードの裏と表の表示切替ができた、という点です。
CSSだけで対応できました。