【css】クリックでカードを捲る

最近、cssでのできることが増えたんじゃないかなと思っています。
css animation と呼ばれる機能を少しずつ理解していっているおかげだと思います。

今回、rotateを使ってカードを捲る動きに挑戦したのでその忘備録を書きます。
ご査収ください。

See the Pen クリックでカードを捲る！ by たまき こう (@ulqvhvox) on CodePen.

以下コードです。

・HTML

<div class="wrap">
  <div class="" id="card">
    <div class="card-front">おもて</div>
    <div class="card-back">うらめん</div>
  </div>
</div>

  <script
    src="https://code.jquery.com/jquery-3.5.0.js"
    integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
    crossorigin="anonymous"></script>

・CSS

.wrap{

}
#card{
  margin: auto;
  width: 200px;
  height: 300px;
  border-radius: 10px;
  border: 1px solid black;
  transform-style: preserve-3d;
  transition: transform .8s;
}

.card-front, .card-back{
  margin: auto;
  width: 200px;
  height: 300px;
  border-radius: 10px;
  border: 1px solid black;
  position: absolute;
  backface-visibility: hidden;
  font-size: 40px;
  padding-top: 20px;
  text-align: center;
}

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

.card-back{
  background: red;
}

.turnover{
  transform: rotateY(180deg)
}

・transform: rotateY(); = 縦軸を中心に左右に反転できます。

・transform-style: preserve-3d; = transformで変形する時に用いられます。
3D空間の中で子要素がそれぞれの位置を維持するように描画してくれます。
(これがないと、裏面を違う要素で表示できませんでした。)

・JS

$(function(){
 console.log("tamaki")
    var card = document.getElementById('card');
    card.addEventListener('click', function() {
      turnover();
    });
 
    function turnover() {
      if(card.className = card.className === ' '){
        card.className = 'turnover';
      }else{
        card.className = ' ';
      }
    }
})

turnover というクラスを使って、
クリックするたびにturnoverを付与する形にしています。

以上！