次のコードを取得します。
<html>
<body onload="x=0" onkeydown="document.images[0].style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation='+(x=++x%4)+')'">
<img src="DSCF0353.jpg" height=900>
</html>
Windows 7/IE9 ではキーストロークごとに表示された画像を 90° 回転させるのに、Windows 8/IE10 ではそうしない (画像が回転しない) のはなぜですか? Windows 8/IE10 で回転を生成するコードはどれですか (可能であれば上記と同様)?
私が得た3つの応答をありがとう。Sandeep が css3 の回転プロパティを参照していることが最も直接的な解決策のように思えたので、それをたどって、ここで最も簡単な答えを見つけました: CSS3/HTML5 を使用してテキストを回転すると、古い方法と新しい方法を直接比較でき、この改訂されたコードにつながります。
<html>
<body onload="x=0" onkeydown="document.images[0].style.msTransform='rotate('+((x=++x%4)*90)+'deg)'">
<img src="DSCF0353.jpg" height=900>
</html>
これにより、Pi ベースのラジアンから変換するのではなく、度数を直接参照できます。90 度の増分は便利ですが、新しい方法 (他の提案と同様) では、ことわざの帽子をかぶるだけで、他の角度も使用できます。
動作のわずかな違いの 1 つは、OLD メソッドでは、表示される画像の左上隅の物理的な位置が一定であったことです。NEW方式では、0度回転で表示したときの画像のCENTERの位置が画像の回転中心になります。
もう 1 つの異なる側面は、以前は、画像に何らかの書式設定を適用する必要があったことです (この場合、高さを 900 に設定)。その要件は適用されなくなりました。
補遺: ポジショニングといえば、この有用な答えにつながりました: CSS で複数の変換を適用する方法は? 回転と再配置の組み合わせ (「移動」) について。スペースで区切って、 rotate (r)とtranslate(x,y)を 1 行に並べて入力します。操作は次の順序で実行されることに注意してください。
translateが最初の場合、イメージは指定された量 (ピクセルの場合は「px」) だけ元の方向にシフトされ、新しい中心位置を中心に回転されます。
回転が最初の場合 (参照ページのように)、画像は元の中心を中心に回転し、回転した画像の相対 (回転) 座標系で指定された量だけシフトされます。
まさにそのために意図されたjQuery回転プラグインを使用してください。