效果图：

?

<template> <div class="glassReflection"> <div class="scene"> <div class="card"> <div class="showCard showCardFront"> <img src="../showFiles/3.png" /> </div> <div class="showCard showCardBack"> <img src="../showFiles/2.jpg" /> </div> </div> <div class="card"> <div class="showCard showCardFront"> <img src="../showFiles/4.jpg" /> </div> <div class="showCard showCardBack"> <img src="../showFiles/5.jpg" /> </div> </div> </div> </div> </template> <script> export default {}; </script> <style scoped> .glassReflection { width: 60%; height: 95%; margin: 1%; display: flex; justify-content: space-around; align-items: center; background: rgba(0, 0, 0, 0.8); } .scene { width: 90%; display: flex; justify-content: space-around; align-items: center; /* perspective: 800px; */ } .card { position: relative; width: 15rem; height: 16rem; color: white; cursor: pointer; transition: 1s ease-in-out; transform-style: preserve-3d; } /* 固定宽高的父元素触发，子元素翻转，如果直接对元素hover触发，元素翻转过程中， 元素区域变小，光标很有可能就脱离元素，造成不顺畅 */ .card:hover .showCardFront { transform: rotateY(0.5turn); } .card:hover .showCardBack { transform: rotateY(0); } .showCard { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; transition: 1s ease-in-out; /* 倒影(-webkit-box-reflect)属性值有：dirrection-方向:above向上，below向下，left向左，right向右。 offset距离：可以是数值，也可以是百分比 */ -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4)); } img { width: 15rem; height: 16rem; -o-object-fit: cover; object-fit: cover; } .showCardBack { transform: rotateY(0.5turn); } </style>

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。