用 CSS 翻转鼠标悬停图片

使用 transform CSS 属性翻转图像。可以尝试运行以下代码在鼠标悬停时翻转图像

示例

在线演示

<!DOCTYPE html>
<html>
   <head>
      <style>
         .myimg:hover {
            transform: scaleX(-1);
         }
      </style>
   </head>
   <body>
      <h2>Heading One</h2>
      <p>Let's flip the image on mouse over:</p>
      <img class = "myimg" src = "https://tutorialspoint.com/python/images/python_data_science.jpg"
         alt = "Python Data Science" width = "300" height = "200">
   </body>
</html>

更新时间： 2020 年 6 月 24 日

365 次浏览

助力您的事业

完成课程获得认证

开始
广告