翻牌的效果css

/* 翻的正面 */
.front-pai{
  width: 200rpx;
  height: 258rpx;
  background-color: #e24444;
  padding-bottom: 14rpx;
  box-sizing: border-box;
  position: absolute;
  top: 0;
    left: 0;
  opacity: 1;
  transform-origin: center;
  transform: rotateY(0deg);
  transition: opacity .8s, transform .8s;
}
/* 翻的结果面 */
.back-pai{
  width: 200rpx;
  height: 258rpx;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform-origin: center;
  transform: rotateY(90deg);
  transition: opacity .8s, transform .8s .5s;
}
/* 翻的效果 */
.front-ani{
  opacity: 0;
  transform: rotateY(90deg);
}
.back-ani{
  opacity: 1;
  transform: rotateY(0);
}

上一篇:异步发送邮件、短信、微信


下一篇:微信开发之消息接收与回复--weixin-java-tools