More than 3 years have passed since last update.

【初心者でもわかる】css1行！画像や要素を左右反転させたり上下反転させる方法

Posted at 2021-02-19

どうも7noteです。上下左右の反転方法。

画像を配置するとき、左右を反転させた画像が必要な場合わざわざフォトショップなどの画像編集ツールを使う必要はありません。

CSSで簡単に反転することができます。

今回使う画像

style.css

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

style.css

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

style.css

img {
  transform: scale(-1, -1);   /* 上下左右反転 */
}

これは逆さまになっているのと同じなので、rotateでも同じことができます。

style.css

img {
  transform: rotate(180deg); /* 逆さま */
}

※上と同じ

普通は反転なんかあまり使わないかもしれないですが、左右対称のものなどは画像パーツ1つだけで対応できたりしますね。
他にもオシャレに見せたり、アニメーションと組み合わせても面白いかもしれません。