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

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

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

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

ほら、ダメでしょうこれは・・・
あと、シンメトリー(左右対称)画像も駄目です。
でも、便利だから装飾などにもいろいろ使えそう。
ちなみに、画像以外のエレメントなんかも、簡単に左右対称できるので、これは便利便利!
鏡の効果などを作るのができそうですね。
0 件のコメント:
コメントを投稿