其他分享
首页 > 其他分享> > 翻牌的效果css

翻牌的效果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);
}

标签:opacity,origin,效果,transition,transform,rotateY,8s,css,翻牌
来源: https://www.cnblogs.com/qianxiaoniantianxin/p/14481708.html