情侣券-选中卡片翻转动画

效果

代码

.animt {
  animation: turn 1.2s;
}

@keyframes turn {
  0% {
    transform: perspective(150px) rotateY(0deg);
  }

  50% {
    transform: perspective(150px) rotateY(0deg);
  }

  100% {
    transform: perspective(150px) rotateY(179.9deg);
  }
}

总结

情侣券随机券三篇动画完结了。
回顾一下顺序：

1. 用户进入页面卡片洗牌：效果实现
2. 用户点击卡片进行翻转（本篇）
3. 翻转之后显示卡片内容：效果实现