动画效果见链接 http://caibaojian.com/demo/2017/03/flip.html
参考资料：
http://caibaojian.com/3d-flip-card.html
https://www.webhek.com/post/css-flip.html
动画原理
- 正面和反面是两个div，通过“子绝父相”实现完全层叠
- 正面要在反面的上面，即正面的z-index必须大于反面的z-index
- 反面在动画开始前，先水平翻转180度 transform: rotateY(180deg);
- 动画过程中，为避免看到正反面的背面，需隐藏各自的背面 backface-visibility:hidden;
- 添加过渡动画，配置动画持续时间，速度曲线 和开始时间 transition:all 1s ease-in-out 0s;
- 动画开始后，正面翻转180度 transform: rotateY(180deg)，反面翻回到0度 transform: rotateY(0deg);
- 悬浮触发动画，通过:hover实现；
- 点击触发动画，通过绑定动态样式类实现；
完整演示代码
<template> <div> <div class="flip-box"> <div :class="{'flip-front':playFlip}" class="flip-item flip-item-front"> <span>正面</span> </div> <div :class="{'flip-back':playFlip}" class="flip-item flip-item-back"> <span>反面</span> </div> </div> <button @click="play">点击翻转</button> </div> </template> <script> export default { data() { return { playFlip: false, } }, methods: { play() { this.playFlip = !this.playFlip } } } </script> <style scoped> .flip-box { position: relative; overflow: hidden; height: 100px; width: 120px; } .flip-item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all 1s ease-in-out 0s; backface-visibility: hidden; box-sizing: border-box; } .flip-item-front { z-index: 2; background: red; color: white; } .flip-item-back { transform: rotateY(180deg); z-index: 1; background: green; color: white; } .flip-box:hover .flip-item-front { transform: rotateY(180deg); } .flip-box:hover .flip-item-back { transform: rotateY(0deg); } .flip-front { transform: rotateY(180deg); } .flip-back { transform: rotateY(0deg); } </style>
