【CSS】画像や要素を左右反転させる方法

Webデザインを制作していると、「アイコンの向きを逆にしたい」「画像を鏡合わせ（ミラー）のように表示させたい」といった場面によく遭遇します。

一言に「左右反転」と言っても、単純な画像だけでなく、文字（テキスト）や背景画像、さらには回転と組み合わせた複雑なアニメーションなど、用途によって最適なプロパティの使い分けが重要になります。

この記事では、CSSで要素を左右反転させる基本の transform: scaleX(-1) の使い方から、背景画像の反転テクニック、さらには色反転や回転との組み合わせまで、実務で即活用できるサンプルコードと共に詳しく解説します。

CSSで要素を左右反転させる基本テクニック

CSSで特定の要素を左右反転（鏡像）にする最も一般的かつ推奨される方法は、transform プロパティを使用することです。

このプロパティを使えば、要素のサイズや位置を保ったまま、見た目だけを反転させることができます。

ここでは、基本となる scaleX 関数の書き方と、類似した指定方法との違いについて見ていきましょう。

transform: scaleX(-1) の基本的な書き方

要素を水平方向に反転させるには、倍率を指定する scaleX() に「-1」を設定します。

<div class="flip-box">
    左右反転する要素
</div>

<style>
.flip-box {
    width: 200px;
    padding: 20px;
    background-color: #3498db;
    color: white;
    text-align: center;
    
    /* 要素を左右反転させる */
    transform: scaleX(-1);
}
</style>

transform: scaleX(-1); という記述は、要素の横幅の倍率を「マイナス1倍」にするという意味を持ちます。

数値が「-1」になることで、要素がその中心軸を基準にしてパタンと裏返ったような状態（鏡像）になります。

この際、要素が占有する元のスペース（幅や高さ）は変化しません。
あくまで「描画される見た目」だけが反転するため、レイアウトが崩れる心配が少ないのが大きなメリットと言えます。

transform: scale(-1, 1) との違い

左右反転を行う際、scaleX(-1) の代わりに scale(-1, 1) と記述されることもあります。

/* これも左右反転になります */
transform: scale(-1, 1);

scale() 関数は、第1引数に横方向、第2引数に縦方向の倍率を指定します。

scale(-1, 1) は「横をマイナス1倍（反転）、縦を1倍（維持）」とするため、結果として scaleX(-1) と全く同じ動作をします。

コードの短さや意図の分かりやすさから、左右反転のみが目的であれば scaleX(-1) を使うのが一般的ですが、将来的に上下反転も組み合わせる可能性がある場合は scale() で記述しておくと拡張性が高まるでしょう。

【用途別】CSS 左右反転の具体的な実装例

基本を理解したところで、次は実際のWeb制作で頻出する具体的なシチュエーション別の実装方法を確認しましょう。

画像（imgタグ）や背景画像（background-image）では、それぞれ注意すべきポイントが異なります。

ここでは、サジェストキーワードでも関心の高い「画像」「文字」「背景」の3つのパターンについて深掘りします。

css 画像 左右反転の方法

<img> タグで表示している画像を反転させる場合、クラスを付与するだけで簡単に対応できます。

<img src="arrow-icon.png" alt="矢印" class="is-flipped">

<style>
.is-flipped {
    /* 画像を左右反転 */
    transform: scaleX(-1);
    
    /* 古いブラウザ（IEなど）への互換性を考慮する場合 */
    /* filter: FlipH; */
}
</style>

画像に transform: scaleX(-1); を適用すると、画像の内容そのものが反転します。

例えば、右を向いている動物の写真を左向きに変えたり、矢印アイコンの向きを反転させて「戻る」ボタンとして再利用したりするのに非常に便利です。

注意点として、画像内に「文字」が含まれている場合、その文字まで鏡文字になってしまうため、文字入りの画像に使う際はデザイン上の配慮が必要になります。

文字（テキスト）を左右反転させる際の注意点

テキスト要素（pタグやspanタグなど）を左右反転させると、当然ながらすべての文字が「鏡文字」となり、読むことができなくなります。

.mirror-text {
    display: inline-block; /* transformを効かせるために必要 */
    transform: scaleX(-1);
}

文字を反転させる場合、対象が <span> などのインライン要素であれば、display: inline-block; などを指定して「ブロック的な性質」を持たせないと transform が正しく機能しない場合があります。

アート的な演出として鏡文字を使いたい場合には有効な手法ですが、アクセシビリティの観点からは、読み上げソフトが正しく認識できるか確認するなどの注意が必要です。

Background-image（背景画像）を反転させるテクニック

CSSの background-image プロパティで指定した背景画像だけを反転させたい場合、残念ながら background-image 自体を反転させる専用のプロパティは存在しません。

そのため、擬似要素（::before や ::after） を活用して実装するのが定石です。

<div class="bg-flip-container">
    コンテンツの中身（文字は反転させない）
</div>

<style>
.bg-flip-container {
    position: relative;
    width: 300px;
    height: 200px;
    z-index: 1;
}

/* 背景専用の擬似要素を作る */
.bg-flip-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('bg-pattern.jpg');
    background-size: cover;
    
    /* 背景だけを左右反転 */
    transform: scaleX(-1);
    
    /* コンテンツの背面に配置 */
    z-index: -1;
}
</style>

親要素そのものを反転させてしまうと、中に入っている文字まで反転してしまいます。

そこで、背景画像だけを持つ「透明な壁紙」のような擬似要素を作成し、その擬似要素に対して scaleX(-1) を適用します。

この方法を使えば、文字やボタンなどのコンテンツは正常な向きのまま、背後のデザインだけを反転させることが可能です。

z-index: -1; を指定して、背景が文字の上に重ならないように制御するのがポイントとなります。

反転と回転を組み合わせた応用表現

左右反転は、回転（rotate）と組み合わせることで、さらに多彩な表現が可能になります。
複雑な形状のマスク効果や、特定の角度での反転など、モダンなUIで使われるテクニックを紹介しましょう。

反転と回転を併用する際は、記述する順番によって結果が変わるという特性を理解しておくことが不可欠です。

CSS 反転 回転を同時に行う方法

例えば、「左右反転させたあとに45度回転させる」といった指定を一行で行うことができます。

.complex-transform {
    /* 左右反転し、かつ45度回転させる */
    transform: scaleX(-1) rotate(45deg);
}

transform プロパティには、複数の関数をスペース区切りで並べることが可能です。

左側に書いた関数から順番に実行されるため、scaleX(-1)（反転）した後に rotate(45deg)（回転）するという処理の流れになります。

アイコンの角度を微調整しつつ向きを変えたい場面などで重宝する書き方です。

CSS mask-image 反転によるマスク効果

特定の形状で要素を切り抜く mask-image を使用している際、マスクの形だけを反転させたいケースがあります。

.masked-element {
    -webkit-mask-image: url('mask-shape.svg');
    mask-image: url('mask-shape.svg');
    
    /* マスクをかけている要素ごと反転させる */
    transform: scaleX(-1);
}

要素にマスクを適用した状態で scaleX(-1) を使うと、中身のコンテンツとマスクの形状の両方が一括で反転します。

もし「マスクの形だけを左右逆にしたい（中身はそのまま）」という場合は、前述の背景画像のテクニックと同様に、擬似要素にマスクを適用して反転させる手法を検討してください。

CSSで画像の色も反転させる方法 (filter: invert)

「反転」という言葉は、向きだけでなく「色の反転」を指すこともあります。
ダークモードの実装や、ネガポジ反転のような視覚効果を狙う場合に filter プロパティが活躍します。

filter: invert() の使い方

<img src="photo.jpg" alt="写真" class="color-invert">

<style>
.color-invert {
    /* 色を完全に反転させる（ネガポジ反転） */
    filter: invert(100%);
}
</style>

filter: invert(100%); を指定すると、色が補色に変換されます。
白は黒に、青はオレンジにといった具合です。

向きの反転（transform）と組み合わせて transform: scaleX(-1); filter: invert(100%); と記述すれば、「左右を逆にしつつ、色も反転させた」非常にインパクトのある画像表示を実現できます。

HTML/CSSのスキルを活かして年収を上げる方法

以上、CSSで画像や要素を左右反転させる方法について解説してきました。