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

CSSで画像を反転（ミラー効果）させる方法をわかりやすく解説

CSSを使えば、画像編集ソフトやJavaScriptに頼ることなく、画像を左右反転させてミラー効果を実現できます。鍵となるのはtransformプロパティとscaleX(-1)の指定です。ここでは、マウスホバーすると画像が反転するサンプルコードを紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img:hover {
    transform: scaleX(-1);
    width: 400px;
    height: 400px;
}
</style>
</head>
<body>
<h1>画像を反転させるサンプル</h1>
<img src="https://i.picsum.photos/id/551/400/400.jpg">
<h1>上の画像にマウスを合わせると反転します</h1>
</body>
</html>

コードのポイント

  • transform: scaleX(-1); … X軸方向（水平方向）に-1倍することで、画像が鏡のように左右反転します。
  • :hover 擬似クラス … マウスカーソルが画像に乗ったときだけ反転が適用されます。常に反転させておきたい場合は、img:hoverではなくimgセレクターに直接指定してください。
  • 応用 … scaleY(-1)を指定すれば上下反転も可能です。scale(-1, -1)とすれば180度回転した状態になります。

実行結果

上記のコードをブラウザで開くと、まずは通常の状態で画像が表示されます。

CSSで画像を反転（ミラー効果）させる方法をわかりやすく解説

画像にマウスカーソルを合わせると、以下のようにミラー効果によって画像が左右反転して表示されます。

CSSで画像を反転（ミラー効果）させる方法をわかりやすく解説

  1. CSSで画像にボーダー（枠線）を追加する方法

    Webページ上の画像にボーダー（枠線）を追加したい場合、CSSの border プロパティを使うのが最も簡単な方法です。border プロパティは「太さ」「スタイル」「色」の3つの値をまとめて指定できるショートハンド（一括指定）プロパティです。 基本的な書き方 border プロパティは以下のように記述します。 border: 太さ スタイル 色; 例えば border: 8px solid rgb(0, 238, 255); と指定すると、8pxの太さの実線（solid）がシアン系の色で描画されます。 サンプルコード 以下は、CSSを使って画像にボーダーを追加する具体的なコード例です。 &l

  2. CSSを使って画像の上にボタンを重ねて表示する方法

    CSSで画像の上にボタンを配置する方法 画像の中央にボタンを重ねて表示したい場合、親要素にposition: relativeを指定し、ボタン側にposition: absoluteを指定するのが基本のテクニックです。さらにtransform: translate(-50%, -50%)を組み合わせることで、ボタンを画像のど真ん中に正確に配置できます。 以下は、CSSを使用して画像の上にボタンを追加する具体的なコード例です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport&quo