评论

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

CSS:实现卡片翻转效果

效果

代码

.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. 翻转之后显示卡片内容:效果实现
最后一次编辑于  2020-11-12  
点赞 2
收藏
评论
登录 后发表内容