<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { /* 添加透视效果 */ perspective: 400px; } .box { position: relative; width: 300px; height: 300px; margin: 100px auto; transition: all 1.4s; /* 保留3D模式 */ transform-style: preserve-3d; } .box:hover { transform: rotateY(180deg); } .front, .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; text-align: center; line-height: 300px; /* 解决闪烁问题 */ backface-visibility: hidden; color: white; font-size: 30px; } .front { background-color: pink; z-index: 1; background: url(./744908.jpg) no-repeat; background-size: cover; } .back { background-color: purple; transform: rotateY(180deg); background: url(./953903.jpg) no-repeat; background-size: cover; } </style> </head> <body> <div class="box"> <div class="front"></div> <div class="back"></div> </div> </body> </html>
