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

CSSを使ってマウスオーバー時に画像を反転させる方法

CSSの transform プロパティを使用すると、画像を簡単に反転させることができます。scaleX(-1) を指定すると水平方向（左右）に反転し、:hover 疑似クラスと組み合わせることで、マウスオーバーした瞬間に画像が反転するエフェクトを実現できます。

実装例

以下のコードでは、画像にマウスカーソルを合わせると、水平方向に反転して表示されます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .myimg:hover {
            transform: scaleX(-1);
         }
      </style>
   </head>
   <body>
      <h2>見出し</h2>
      <p>画像にマウスを合わせると反転します：</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>

ポイント解説

  • transform: scaleX(-1)：X軸方向のスケールを -1 にすることで、画像が左右反転します。
  • :hover 疑似クラス：要素にマウスカーソルが乗ったときのみスタイルを適用します。

応用テクニック

垂直方向に反転させたい場合は scaleY(-1) を使用します。また、transition プロパティを追加すると、反転がスムーズにアニメーション表示され、より洗練された印象になります。

.myimg {
   transition: transform 0.5s ease;
}
.myimg:hover {
   transform: scaleX(-1);
}
  1. CSSだけで作る3Dフリップカードの実装方法を徹底解説

    CSSだけでも、マウスホバーすると反転して裏面が見える「フリップカード」を実装できます。名刺やメンバーカードなど、表と裏で異なる情報を見せたい場面で活躍する演出です。この記事では、実際に動くサンプルコードを交えながら、フリップカードの作り方と仕組みをわかりやすく解説します。実装例：ホバーで反転するフリップカードCSSでフリップカードを作成するには、以下のように記述します。<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-wid

  2. CSSで作る3Dフリップボックスの実装方法をわかりやすく解説

    CSSだけでも、マウスオーバー（ホバー）したときに表裏が反転する「フリップボックス」を簡単に実装できます。この記事では、perspective や transform などのCSSプロパティを使った3D反転カードの作り方を、実際のコード例とともに詳しく解説します。 フリップボックスの仕組み フリップボックスを実現するためには、主に以下のCSSプロパティが重要になります。 perspective：親要素に指定することで、3D空間の奥行き（遠近感）を生み出します。 transform-style: preserve-3d：子要素が3D空間内に配置されるようにします。 backface-visib