两张图片实现双面卡牌旋转动画

实现方式：

1、静态图片css方式实现

.anim {
	animation: rotation 1s ease-in-out;
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
    background-image: url('img1');
  }
  50% {
    transform: rotateY(90deg);
    background-image: url('img1');
  }
  51% {
    background-image: url('img2');
  }
  100% {
    transform: rotateY(0deg);
    background-image: url('img2');
  }
}

2、如果图片为动态的话，则需要js实现：

const el = document.getElementById('card');
if (!el) return;
const img = this.cardList[this.currentIndex].imgUrl;
const backImg = require('../../assets/img/card/big-card-back.png');
const style = document.styleSheets[0];
style.insertRule('@keyframes rotation {' +
    '  0% {' +
    '    transform: rotateY(0deg);' +
    '    background-image: url(' + backImg + ');' +
    '  }' +
    '  50% {' +
    '    transform: rotateY(90deg);' +
    '    background-image: url(' + backImg + ');' +
    '  }' +
    '  51% {' +
    '    background-image: url(' + img + ');' +
    '  }' +
    '  100% {' +
    '    transform: rotateY(0deg);' +
    '    background-image: url(' + img + ');' +
    '  }' +
    '}');

3、实现原理：

1、容器执行动画0-90度。
2、90度时切换图片。
3、执行90-0度的动画**