【css】スタイルシートだけで画像を裏返そう【お手軽・簡単コピペ】

css3-vector

デザイナーさんとかがアイキャッチの画像を作成して、それを左右に設置。

右と左で画像を反転させてシンメトリー(左右対称)にする。。。みたいなお手軽で効果的なデザインをしてくることってありませんか?

別にそれが悪いとかいうわけじゃないんですが、素材の中に反転させているものを用意してなかったりするとわざわざ作ってもらわないといけない流れになるんですが

「えー、それぐらい何か技でできないんですか?」

みたいに面倒くさがられたり…。ああ。すべてフィクションですよ、フィクション。

まあでも、実際。画像を都度都度用意して貼り付けていくというのも、なんとなくスマートじゃないですよね。反転処理できれば、リソースの節約にもなるわけですから(てきとー)。

というわけで覚書なのですが、スタイルシートだけで画像を裏返す方法を紹介したいと思います。

簡単です。

スポンサーリンク

使うのはtransform

実はcssのtransform:scaleにて一発解決だったりします!

左右反転は

transfome: scale(1, -1);

上下反転は

transform: scale(-1, 1);

scale(スケール)自体は画像の拡縮倍率で使われることが多いプロパティですよね。

これをマイナス1倍という数値にしてあげることで、等倍反転ができちゃうんですね。

まとめ

矢印とか模様の反転とか使える場面は結構あると思います。まあ、ちょっとしたテクニックって繰り返し繰り返し使い続けないと覚えられないので、こうして備忘録的な覚書として書いてみました。決して年齢のせいではないとシンジタイ。。。

参考になれば幸いです!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする