今天要作卡片翻面
這裡有之前先作好的2張卡片
就直接拿來用

<div class="photo">
    <div class="front">第一張卡片
    </div>
    <div class="back">第二張卡片
    </div>
</div>

.front {
  width: 300px;
  height: 350px;
  backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
}
.back {
  width: 300px;
  height: 350px;
  backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(-180deg);
}
.photo:hover .back {
  transform: rotateY(0deg);
}
.photo:hover .front {
  transform: rotateY(180deg);
}

backface-visibility 是要隱藏翻轉到背面的卡片
transition 翻轉的速度，數字愈大速度愈慢
transform-style 分預設2D flat 和3D preserve-3d
現在要作Y軸翻轉，所以要使用到 preserve-3d
transform: rotateY() 是左右翻轉
若是要上下翻轉就是 transform: rotateX()

gif圖傳不上來
只好改用上圖
請見諒
--- 明日待續。