<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background-color: deepskyblue; } .music { width: 300px; height: 300px; margin: 50px auto; position: relative; } .music::before, .music::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: red; background: url(DemoMaterial/3D/musicb.jpg) no-repeat; border: 1px solid #ccc; } .music::after { transform-origin: bottom; transition: transform 1s; background: url(DemoMaterial/3D/musict.jpg) no-repeat; } .music:hover:after { transform: rotateX(180deg); } </style> </head> <body> <div class="music"></div> </body> </html>
- demo 效果
