今天学到一个CSS的小知识，记录分享一下：就是使用CSS来实现图片翻转-------把鼠标放在图片上时可以翻转图片，移开后又恢复原状
话不多说，直接上代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS 实现图片翻转效果</title><style>body{min-height: 100vh;padding: 0;margin: 0;display: flex;justify-content: center;align-items: center;background-color: #1db7c2;}.card{position: relative;width: 100px;height: 100px;perspective: 1000px;}.cover,.back{background-color: rgba(255,255,255,0.5);position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;backface-visibility: hidden;transition: all 1s ease-in-out;}.cover{transform: rotateY(0deg);}.back{transform: rotateY(-180deg);}.card:hover .cover{transform: rotateY(180deg);}.card:hover .back{transform: rotateY(0deg);}</style></head><body><div class="card"><div class="cover"><img src="img/emoji_笑哭.jpeg" alt="" height="100px"width="100px"></div><div class="back"><img src="img/emoji_难过.jpg" height="100px"width="100px"></div></div></body></html>
代码中使用到的两张图片素材（好像大小不一样，但是不影响）