版权声明:转载本文,请附录原文地址,如果错误,请联系我。 https://blog.csdn.net/qq_19880197/article/details/86512334
HTML部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css"> </head> <body> <div> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> </div> </body> </html>
CSS部分
div{ width: 500px; height: 313px; margin: 100px auto; position: relative; } div img{ position: absolute; top: 0; left: 0; transition: all 1s; } div img:first-child{ z-index: 1; backface-visibility: hidden;/*不是正面对象的图像,就隐藏*/ } div:hover img{ transform: rotateY(180deg);/*以Y轴为对称轴旋转180度*/ }