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

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

iPhoneで非接触充電できないな〜と思って、iOSを再起動したら、正常に動き出すことに気がついた、下駄です。
 

iPhoneのOSアップデートでは、毎回こうした意味不明現象が起きるので、なんとかしてもらいたい・・・いっそのこと定期的なアップデートなんてしてほしくないと思っているんですが、
 

世の中の人は、新しい機能、アップデートというイベント行事を喜んでいるんでしょうか?
 

なんか、新端末を買わされる、宣伝行為のようにも思えてなりません。
 

セキュリティや、なんらかの不具合アップデートもわかりますが、windowアップデートももはや定例行事になっているし・・・
 

機能追加やアップデートよりも、不具合改修にのみに集中してもらえないもんか・・・
 

って、今回はそんなスマホやOSに対する愚痴ではなく、cssで、エレメントの左右反転をしたいという話です。

cssでの左右反転方法

transformに、flip機能が無いし、filterを使うにもそんな機能は無さそう・・・
 

とりあえず、いろいろ試してみて、transform:scaleXを使うのが正解だったという話です。
 


 

ほら、簡単に左右反転できました。
 

 

当たり前ですが、文字が書かれている画像をflipしてはいけません。
 


 

こんな画像をなんとなく左右反転してしまうと・・・
 


 

ほら、ダメでしょうこれは・・・
 

あと、シンメトリー(左右対称)画像も駄目です。
 

でも、便利だから装飾などにもいろいろ使えそう。
 

ちなみに、画像以外のエレメントなんかも、簡単に左右対称できるので、これは便利便利!
 

鏡の効果などを作るのができそうですね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です