CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用してマウスオーバーで画像を反転します

変換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://www.tutorialspoint.com/python/images/python_data_science.jpg"
         alt = "Python Data Science" width = "300" height = "200">
   </body>
</html>

  1. CSSでフリップカードを作成するにはどうすればよいですか？

    CSSでフリップカードを作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    body {       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif

  2. CSSでフリップボックスを作成するにはどうすればよいですか？

    CSSでフリップボックスを作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    body {       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-seri