最近有个CSS效果的小需求,就是实现实现两张图片重叠在同一个位置,然后鼠标放在图片上就实现翻转成另一张图片,鼠标移出图片就反转为原来的图片,好了,先看看效果图:
接下来,直接上代码(注意将照片地址换为自己的照片地址,一些css样式参数也可自行调整):
<!DOCTYPE html> <html> <head> <title>图片重叠反转案例</title> <style type="text/css"> div{ position: relative; margin: 100px auto; width: 224px; height: 224px; } div img{ position: absolute; left: 0; top: 0; transition: all 2s; } div img:first-child{ z-index: 1; backface-visibility: hidden; } div:hover img{ transform: rotateY(180deg); } </style> </head> <body> <div> <img src="https://www.panziye.com/wp-content/uploads/2020/08/2020080501135121.png"/> <img src="https://www.panziye.com/wp-content/uploads/2020/08/2020080501112542.png" /> </div> </body> </html>
看代码是不是很简单,好了,直接拿去用吧!