ウェブサイトで画像を回転させるにはどうすればよいですか？

Question

HTML Webサイトで画像を回転させるための標準コードはありますか？

Answer 1

HTML要素を回転するための唯一のサポートがCSS変換によって提供されると私は信じています。今

• http://www.webkit.org/blog/130/css-transforms/

ありすぎて他のブラウザでサポートされています：

彼らは、WebKitのチームによって発明された（と思う）

• http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

Answer 2

CSS3にはtransformスタイルで、HTML要素を回転させることができます。

.myelement { 
    transform:rotate(45deg); 
} 

これは、ほとんどのブラウザ（Firefox 5、Chrome 13、IE9など）の最新バージョンで動作するはずです。しかし、古いブラウザには問題があります。

あなたがIEの-moz-transformと-webkit-transformなど

古いバージョンでは全くtransformスタイルをサポートしていませんでしたが、彼らがすることができfilter属性を持っている必要があると思いますので、一部の古いブラウザでは、ベンダープレフィックスが必要です代わりに使用されます。残念ながら、回転のためのIEのフィルタ構文はかなり複雑です。度よりもむしろラジアンの値を持つ行列変換を指定する必要があります。そのため、少し不明瞭になる可能性があります。 45度回転するため

、次のコードを使用したい：IE8は（わずかに異なる構文で）-ms-filterを必要とし、一方、あなたは、IE6とIE7はfilterスタイルを必要とすることに注意しましょう

.myelement { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand')"; 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand'); 
} 

を。

むしろ、ここでそれを説明するよりも、私はそれが詳細に説明されているページにあなたを指します。（原因IE6/7構文は、無効なCSS：http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

filterスタイル上の注意の最後の注意progidの後のコロンに、とりわけ）。私はそれが実際に他のブラウザ（特にFirefox 3.6）にスタイルシート全体の解析に失敗するのを見ました。このため、別のIE固有のスタイルシートで使用することをお勧めします。これは他のブラウザから完全に除外できます。

Javascriptでやりたい場合は、JQueryプラグインを使用することをお勧めします。これにより、すべてのブラウザごとに別々のコードを書く必要がなくなります。詳細はこちらをご覧ください：http://plugins.jquery.com/plugin-tags/rotate

Answer 3

クライアント側（ブラウザ内）またはサーバー側（サーバー内で画像をブラウザに再送信）のいずれかで画像を回転します。

ブラウザで回転するには、Spudleyの回答を参照してください。

サーバ上の一般的な使用方法はimagemagickです。ほとんどのウェブ言語/フレームワークには、画像magickを簡単に使用できるようにバインディングが含まれています。例：PHP versionです

A list多くの異なる言語です。

ページの更新を必要とせずに、Ajax技術を使用してユーザーのイメージを回転できます。