こういう時に使う

見出しやスライドショーなどで、左右対称に画像を配置したい時ありますよね。

画像を2枚用意するのは地味に手間だし、CSSで反転させたい・・・！
こういう時に使えるのが、transformです！

transformで解決

この一行で完了。

/* 左右反転 */
.item {
   transform: scale(-1, 1);
}

/* 上下反転 */
.item {
   transform: scale(1, -1);
}

【解説】transformを使えば反転できる

transformは、要素を回転、拡大縮小、傾斜、移動させたい時に使うプロパティ。

その中のscale関数（拡大）を使い、マイナスの値を指定することで反転できます。

See the Pen Untitled by yurippe-i (@yurippe-i) on CodePen.

たとえばtransform: scale(-1,1);だと、
Y方向はそのままに、X方向だけマイナス方向（左）に1倍拡大します。

左に動いてないじゃん！
と思うかもしれませんが、それはデフォルトでは、要素の中心を起点に反転するからです。

起点はtransform-originで変更もできます。この解説はまたの機会に。

上下左右反転させたいときは、両方の値をマイナスにしましょう。

結構便利なので、試してみてくださいね。

参考

MDN公式ドキュメント