まず最初に、画像の反転の活用シーンを具体的にイメージできるよう、サンプルを用意しました。それぞれ２つのドーナツの画像を配置していますが、これらの画像は全く同じものです。
上のサンプルは２つのドーナツの画像をそのまま配置しています。
それに対し、下のサンプルは片方のドーナツの画像を左右反転させています。
２つのサンプルを見比べてみて、皆さんはどのようなイメージを持ちますか？
ドーナツの作り方
ドーナツの作り方
感じ方は人それぞれだと思いますが、画像に手を加えなかった上のサンプルは、全く同じ画像が配置されていることが丸わかりで、手抜き感や違和感がある…と言えます。
一方、片方の画像を反転させた下のサンプルは、ぱっと見では全く同じ画像だと認識されず、自然なイメージ…になります。
もちろん、rotate( )で画像を回転させても良いのですが、自由に回転させるのではなく、反転（左右反転・上下反転）させたい場合は今回紹介するrotateX( )・rotateY( )を使った方が早くて便利です。
画像をビシッと180°反転させたいというシーンは多いので、rotate( )だけでなく、rotateX( )・rotateY( )の基本もしっかり押さえておきましょう！
rotateX・Yの基本
画像を反転させる方法を紹介する前に、まずはrotateX( )・rotateY( )の基本的な仕様を解説していきます。
まずはじめに、rotateX( )・rotateY( )は、rotate( )と同じくtransfromプロパティの値です。
CSS解説：＃
transformプロパティ
そして今回、「画像の反転」というタイトルを付けていますが、rotateX( )やrotateY( )では、画像要素（imgタグ）に限らず様々な要素を反転させることができます。
ただ、rotate( )で少しだけ傾ける場合と違って、反転させるとテキストなどの要素は読みづらくなってしまいますし、反転させたい対象は結局、画像であることがほとんどと言えます。
テキスト要素などに反転を適用させてしまうとどうなるか、参考までにサンプルを置いておきます。
テキストが反転して読みづらい！
ものすごく読みづらいですね笑。このように、テキストを反転させる機会などまずありません。
同じ理由で、画像であっても文字を含む画像をCSSで反転することはないと言えます。
また、今回は反転（左右反転・上下反転）に絞って説明しますが、rotateX・Yは本来、要素を反転させる専用のCSSではありません。
正確にはX軸（横）やY軸（縦）を中心に、要素を（立体的に）回転させるCSSです。
要素を立体的に横・縦に回転させた結果、ある角度（180°）で反転させられるという仕組みです。
…と言っても、立体的に回転ってちょっとイメージしづらいですよね。
そこで、イメージをつかめるように、ボタンをクリックするとrotateX・Yで回転させられる立体要素のサンプルを用意しました。立体的に回転する様子がわかると思います。
front
back
right
left
top
bottom
というわけで、rotateX・Yは、あくまで画像の反転もできるCSSということを基礎知識として知っておきましょう。
POINT!
- ・rotateX・Yは画像だけでなくテキストなども反転させられる！（出番はない）
- ・反転専用のCSSではなく、横軸/縦軸を中心に要素を回転させる！
- ・ただし、実際は画像の反転目的で使われることが多い！
画像を左右に反転させる
画像の反転は、どちらかと言うと上下よりも左右に反転させたい場合が多いので、先に左右反転から説明します。
画像を左右に反転させるには、対象の画像をセレクタに指定した上で、transform: rotateY(180deg)と指定します。
左右反転＝rotateY(180deg)…と、呪文のように覚えてしまっても良いのですが、「Y軸（縦軸）を軸に要素を回転させる＝左右に反転する」と、理屈で理解しておくと忘れません。
それでは、サンプルの表示結果とコードの紹介です。（反転させる前の画像も掲載しておきます）
▲反転する前
▲左右に反転
<div class="rotatey_box">
<div>
<img src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
<p>▲反転する前</p>
</div>
<div>
<img class="rotatey_img" src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
<p>▲左右に反転</p>
</div>
</div>
.rotatey_box {
display: flex;
justify-content: center;
gap: 20px;
}
.rotatey_box img {
width: 100%;
max-width: 300px;
display: block;
margin: 2rem auto;
}
.rotatey_box p {
text-align: center;
font-size: .8rem;
color:tomato;
}
.rotatey_img {
transform: rotateY(180deg);
}
反転させたい場合、rotateY( )の数値はどんな画像でも180°の指定でOKです。
たとえば上で紹介したサンプル画像のように、元の画像がまっすぐではなく傾いていたとしても、rotateYの指定数値を変える必要はありません。
むしろ、二次元の画像をrotateYで中途半端な角度に回転させると、画像が歪んでしまいます。
参考までに、rotateY(45deg)と指定したサンプル画像を用意しました。画像がぐにゃっとしてしまっています。
▲rotateY(45deg)
基本的に、Webページは二次元（平面）で構成されるので、要素を3D回転させたいことはほとんどありません。なので、rotateYやrotateXを使う場合、角度の指定はほぼ180°しか使わないと思っても良いぐらいです。
POINT!
- ・画像を左右に反転させたい場合は、rotateY( )を使う！
- ・どんな画像でも、rotateYの指定数値は180degでOK！
- ・二次元の画像を中途半端に立体回転させると、画像が歪んでしまう！
画像を上下に反転させる
画像を上下に反転させる場合は、rotateX(180deg)を適用させます。
X軸（横軸）を中心に画像が立体回転するので、180°のところでちょうど上下が反転するというわけですね。
指定の仕方はrotateYと全く同じなので、さっそくサンプルの表示結果とコードを見ていきましょう。
▲反転する前
▲上下に反転
<div class="rotatex_box">
<div>
<img src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
<p>▲反転する前</p>
</div>
<div>
<img class="rotatex_img" src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
<p>▲上下に反転</p>
</div>
</div>
.rotatex_box img {
width: 100%;
max-width: 300px;
display: block;
margin: 2rem auto;
}
.rotatex_box p {
text-align: center;
font-size: .8rem;
color:tomato;
}
.rotatex_img {
transform: rotateX(180deg);
}
rotateXで上下反転させる場合も、角度の指定は180degでOKです。
また、rotateYと同じように、二次元の画像を中途半端な角度で立体回転させると画像が歪んでしまいます。（下のサンプルを参照）
▲rotateX(45deg)
わざと画像を少し歪めたい場合に利用できなくもないですが…それならば、画像を作成する段階で調整しておいた方が良いですし、やはり基本的に180deg以外を指定することはないと思って差し支えないかと思います。
※もちろん、立体的な要素を立体的に回転させたい場合は別です
また、上下が反転しても違和感が出ないイラストや写真はあまり多くはありません。
ので、どちらかというと左右の反転ができるrotateY(180deg)の方が出番は多いと言えるでしょう。
POINT!
- ・画像の上下反転はrotateXを使う！
- ・角度の指定は180degでOK！
- ・どちらかと言うと、上下よりは左右反転の方が使用頻度は高い！
画像を上下左右に反転させる
左右と上下の反転は組み合わせることが可能です。その場合、rotateXとrotateYの両方を適用させます。
transformプロパティには本記事で紹介しているrotateX・Yの他にも様々な値がありますが、変形を組み合わせることが可能です。
そして複数の変形を組み合わせる場合、,（カンマ）などで値を区切らずに、半角スペースを空けて続けて値を記述します。
たとえば画像を上下左右の両方に対して反転させたい場合は、以下のように記述します。
transform: rotateX(180deg) rotateY(180deg)
それでは左右上下に反転したサンプル画像と、そのCSSコードを確認していきましょう。
▲反転する前
▲上下左右に反転
<div class="rotatexy_box">
<div>
<img src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
<p>▲反転する前</p>
</div>
<div>
<img class="rotatexy_img" src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
<p>▲上下左右に反転</p>
</div>
</div>
.rotatexy_box {
display: flex;
justify-content: center;
gap: 20px;
}
.rotatexy_box img {
width: 100%;
max-width: 300px;
display: block;
margin: 2rem auto;
}
.rotatexy_box p {
text-align: center;
font-size: .8rem;
color:tomato;
}
.rotatexy_img {
transform: rotateX(180deg) rotateY(180deg);
}
ちなみにですが、rotateX・Yの指定順序を入れ替えて、rotateY(180deg) rotateX(180deg)としても表示結果は同じになります。
当たり前じゃん！…と思うかもしれませんが、transformプロパティの変形は、同じ指定数値でも指定する順番によって表示結果が変わることがあるので、注意が必要です。（例として、translate→rotateと、rotate→translateでは、同じ数値指定でも表示結果が変わります）
ただ、繰り返しになりますが上下左右反転させるだけであれば、rotateX・Yの指定順序を気にする必要はありません。
さらに補足ですが、上下左右の反転はすなわち点対称ということになります。
左右のみの反転、上下のみの反転は、rotate( )では画像や図形によってはできませんが、点対称であればrotate(180deg)としても同じ結果にできます。
POINT!
- ・画像を上下左右に反転させる場合は、rotateX・Yを両方指定する！もしくはrotateで指定する！
- ・角度の指定はどちらも180degで指定する！
- ・上下左右の反転のみであれば、rotateX・Yの指定順序を気にする必要はない！
