【HTML+CSS】transform: scale();を使えば画像や要素を簡単に反転させられる

transform: scale();で画像や要素を反転させる方法

反転させたい画像や要素に直接CSSを当てればOK。

わかりやすく今回は画像を反転させたいということにして、img要素にCSSをあてる。

左右反転

img {
  transform: scale(-1, 1);
}

img {
  transform: scaleX(-1);
}

上下反転

img {
  transform: scale(1, -1);
}

img {
  transform: scaleY(-1);
}

背景画像

背景画像を反転させたい時は、親要素と子要素にそれぞれtransform: scale();をあてる必要がある。

.parent{
  background-image: url('背景画像を設置');
  transform: scale(-1, 1);
}

.child {
  transform: scale(-1, 1);
}

親要素だけにtransform: scale();をあてると子要素にも当たってしまい、背景画像だけでなくテキストも反転しまう。

なので、子要素にも親要素と同じtransform: scale();を当てることで元通りになる。