今天要寫的主題是撲克卡牌翻轉的效果
滑鼠滑入卡牌區塊後產生翻牌的效果
一樣把基本架構寫好

<div class="centered-wrap">
  <div class="card-wrap">
    <div class="card">
      //卡牌正面
      <div class="card-front"><span>A</span>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Naipe_espadas.png/103px-Naipe_espadas.png">
        <span>A</span></div>
      //卡牌背面
      <div class="card-back"></div>
    </div>
  </div>
</div>

然後把基本的 css 設定好
這邊把整體的尺寸設定在 card-wrap 層、在 card 層做保存 3d 圖層跟翻牌效果的 transition
card-front 跟 card-back 再放入對應的內容

 body{background:#363636;} 

.centered-wrap{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.card-wrap{
  width:200px;
  height:280px;
  position:relative;
}

.card{
  position:absolute;
  width:100%;
  height:100%;
  /*preserve the back when fliping*/
  transform-style:preserve-3d;
  transition:0.5s all ease;
  box-shadow:0px 0px 10px rgba(10,10,0.8);
}

/*front card*/
.card-front{
  border-radius:5px;
  position:absolute;
  background:#e8e8e8;
  width:100%;
  height:100%;
  /*hide backface*/
  backface-visibility:hidden;
  color:#333;
  font-size:1.5rem;
}

.card-front span:nth-of-type(1){
  display:block;
  position:absolute;
  top:5%;
  left:5%;
}

.card-front img{
  display:block;
  position:relative;
  left:25%;
  top:25%;
/*   transform:translate(-50%,-50%); */
}

.card-front span:nth-of-type(2){
  display:block;
  position:absolute;
  right:5%;
  bottom:5%;
}

/*back card*/
.card-back{
  border-radius:5px;
  position:absolute;
  width:100%;
  height:100%;
  /*hide backface*/
  backface-visibility:hidden;
  color:#333;
  font-size:1.5rem;
  background:url("https://cdn.pixabay.com/photo/2017/06/10/03/14/damask-2388884_960_720.png") center top repeat;
  /*flip card-back behind card-front*/
  transform:rotateY(180deg);
}

最後把滑入產生翻牌的效果放進來

.card:hover{
  transform:rotateY(180deg);
}

到這邊就完成了
一樣附上本次的 codepen 如下
https://codepen.io/UHU/pen/MPzKWZ