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

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

cssでの左右反転方法

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