1. ホーム
  2. javascript

Javascript/CSSでhtml/imageを反転させるクロスブラウザの方法?

2023-11-27 20:58:14

質問

画像を反転させるライブラリや簡単な方法はありますか?

このように画像を反転させます。

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

私はアニメーションを求めているのではありません。 ただ、画像を反転させるだけです。

私はググってみたのですが、SVGを利用した複雑なバージョンしか見つかりませんでした。 MozillaZine で SVG を利用する複雑なバージョンしか見つかりませんでしたが、これがクロスブラウザで動作するかどうかは自信がありません。

どのように解決するのですか?

以下のCSSは、IEやCSSトランスフォームをサポートするモダンブラウザで動作します。念のため、垂直反転クラスも入れておきました。

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph;
}
.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv;
}