4

IE で要素を回転させる方法はありますか? 私は現在使用しています：

  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

IEを除くほとんどすべてのブラウザで機能する要素を回転させます.IEはこの機能をサポートしていません。代替手段はありますか？たとえば、回転を有効にする JavaScript または別の css プロパティ。

4

5 に答える 5

4

次を使用できます。

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

回転の値は、1、2、3、または4のいずれかになります。これらの数値は、それぞれ90度、180度、270度、または360度の回転を表します。

残念ながら、この手法では90度刻みの回転しかサポートされないため、特定の種類のアニメーションを実行したり、エフェクトにカーソルを合わせたりする場合は、間違いなく煩わしいものになります。

他の回転効果については、あまり使いにくいmatrixフィルターを確認することもできます。これがあなたを助けるための良い翻訳ツールです：

http://www.useragentman.com/IETransformsTranslator/

于 2012-05-29T15:42:30.877 に答える
4

最近 IE7 と 8 でこれが必要になったので、IE 固有のマトリックス値とオフセットを計算する煩わしさに対処するために、小さな JavaScript を作成することにしました。

スクリプトのアイデアと説明は、次のリンクから得られます。

http://www.boogdesign.com/examples/transforms/matrix-calculator.html

http://extremelysatisfactorytotalitarianism.com/blog/?p=1002

スクリプトは次のとおりです (ノードを使用して実行しますが、ブラウザーのコンソールに貼り付けることもできます)。

// --- initialization

var w = 712;  // object width
var h = 744;  // object height
var deg = 48; // object rotation in degrees

// --- utils

function deg2rad(deg) {
    return deg * (2 * Math.PI) / 360;
}

var rad = deg2rad(deg);

// --- from http://www.boogdesign.com/examples/transforms/matrix-calculator.html

var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);

var a = parseFloat(costheta).toFixed(8);
var c = parseFloat(-sintheta).toFixed(8);
var b = parseFloat(sintheta).toFixed(8);
var d = parseFloat(costheta).toFixed(8);

console.log('-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=' + a + ', M12=' + c + ', M21=' + b + ', M22=' + d + ', sizingMethod=\'auto expand\')";');
console.log('filter: progid:DXImageTransform.Microsoft.Matrix(M11=' + a + ', M12=' + c + ', M21=' + b + ', M22=' + d + ', sizingMethod=\'auto expand\');');

// --- from http://extremelysatisfactorytotalitarianism.com/blog/?p=1002

// calculate bounding box width and height
var bb_w = Math.abs(h * Math.sin(rad)) + Math.abs(w * Math.cos(rad));
var bb_h = Math.abs(h * Math.cos(rad)) + Math.abs(w * Math.sin(rad));

// calculate offsets
var offset_left = Math.floor((w / 2) - (bb_w / 2));
var offset_top = Math.floor((h / 2) - (bb_h / 2));

console.log('left: ' + offset_left + 'px;');
console.log('top: ' + offset_top + 'px;');
于 2012-09-20T14:04:11.717 に答える
2 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

ここで読むことができます

ここに画像の説明を入力

于 2012-05-29T15:40:59.557 に答える
2

これを試して、

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

これには素敵な jQuery プラグインもあります。

jQuery 回転

PSコードは90度回転に制限されていますが、プラグインは制限されていません

于 2012-05-29T15:45:04.300 に答える
1

フィルターを使用できます。

filter: progid:DXImageTransform.Microsoft.Matrix(...);

行列には、任意の角度で回転できるという利点がありますが、そのためには行列の値が必要です。幸いなことに、そのためのツールがあります。

http://css3please.com/

編集: JS でちょっとしたことをしたい場合は、マトリックス エントリを簡単に計算できます。

http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx

于 2012-05-29T15:41:24.927 に答える