どうも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つだけで対応できたりしますね。
他にもオシャレに見せたり、アニメーションと組み合わせても面白いかもしれません。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ