滑鼠劃過旋轉180度並且切換圖片
阿新 • • 發佈:2018-11-02
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .test { width: 103px; height: 103px; margin: 100px auto; position: relative; } img { width:103px; height:103px; position: absolute; transition: all 1s; } .test:hover img { transform: rotateY(180deg); background:#ccc; width:103px; height:103px; border-radius: 50%; } img.one { width:103px; height:103px; z-index: 9; backface-visibility: hidden; } </style> </head> <body> <div class="test"> <img class="one" src="./images/coreImg1.png" alt=""> <img class="two" src="./images/coreImg1Hover.png" alt=""> </div> </body> </html>