用 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.tw/python/images/python_data_science.jpg"
         alt = "Python Data Science" width = "300" height = "200">
   </body>
</html>

更新時間： 2020 年 6 月 24 日

365 次瀏覽

助力您的事業

完成課程獲得認證

開始
廣告