07两面翻转.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 224px; height: 124px; 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); } </style> </head> <body> <div> <img src="qian.svg" alt=""> <img src="hou.svg" alt=""> </div> </body> </html>