透過 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 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始
廣告
© . All rights reserved.