cssを使って画像や要素を左右反転させる方法

2020年11月1日

テクノロジー

eyecatch iPhoneで非接触充電できないな〜と思って、iOSを再起動したら、正常に動き出すことに気がついた、下駄です。 iPhoneのOSアップデートでは、毎回こうした意味不明現象が起きるので、なんとかしてもらいたい・・・いっそのこと定期的なアップデートなんてしてほしくないと思っているんですが、世の中の人は、新しい機能、アップデートというイベント行事を喜んでいるんでしょうか? なんか、新端末を買わされる、宣伝行為のようにも思えてなりません。 セキュリティや、なんらかの不具合アップデートもわかりますが、windowアップデートももはや定例行事になっているし・・・ 機能追加やアップデートよりも、不具合改修にのみに集中してもらえないもんか・・・ って、今回はそんなスマホやOSに対する愚痴ではなく、cssで、エレメントの左右反転をしたいという話です。

cssでの左右反転方法

transformに、flip機能が無いし、filterを使うにもそんな機能は無さそう・・・ とりあえず、いろいろ試してみて、transform:scaleXを使うのが正解だったという話です。 img{ transform:scaleX(-1); } ほら、簡単に左右反転できました。 当たり前ですが、文字が書かれている画像をflipしてはいけません。 こんな画像をなんとなく左右反転してしまうと・・・ ほら、ダメでしょうこれは・・・ あと、シンメトリー(左右対称)画像も駄目です。 でも、便利だから装飾などにもいろいろ使えそう。 ちなみに、画像以外のエレメントなんかも、簡単に左右対称できるので、これは便利便利! 鏡の効果などを作るのができそうですね。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。