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;
}
関連
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] 文字列が有効な数値であるかどうかを確認するにはどうすればよいですか?
-
[解決済み] CSSコンテンツによるHTMLエンティティの追加
-
[解決済み] CSSは常にJavascriptより優先されるべきか?
-
[解決済み] CSSでFirefoxだけをターゲットにする
-
[解決済み] IEでデベロッパーツールを一度開いただけで、JavaScriptが動作するのはなぜですか?
-
[解決済み] 背景画像にCSSフィルタを適用する方法
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 上級者向けJavaScript。この関数はなぜ括弧でくくられるのですか?重複
-
[解決済み] Javascriptによるタッチスクリーンデバイスの検出
-
[解決済み] なぜ "use strict "はパフォーマンスを10倍向上させるのか?
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] javascriptで文字列から関数を作成する方法はありますか?
-
[解決済み] JavaScriptとLuaの微妙な違い [終了しました]