通过 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 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始
广告