IE以外のブラウザでJavaScriptのimage/divを回転させる方法

ユーザーが指定した角度で画像を回転させる必要があります。IE以外のブラウザでJavaScriptのimage/divを回転させる方法

私は次のコードを使用しますが、IEでのみ動作し、他のブラウザでは動作しません。

<div id="frame1" style="overflow:hidden" width='300' height='300'> 
    <div id="frame2" width='200' height='200'> 
     <img src='1.jpeg'' id='im' src='1.jpeg' width='10' height='10'> 
    </div> 
</div> 

<script type="text/javascript"> 

rotate(frame2, 45); 

function rotate (elem, deg) 
{ 
    if (navigator.appName=='Microsoft Internet Explorer') 
    { 
     rad = deg*Math.PI/180; 

     elem.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')"; 

     elem.filters.item(0).M11 = Math.cos(rad); 
     elem.filters.item(0).M12 = -Math.sin(rad); 
     elem.filters.item(0).M21 = Math.sin(rad); 
     elem.filters.item(0).M22 = Math.cos(rad); 
     elem.style.marginLeft=((canvsize-elem.offsetWidth)/2)+'px' 
     elem.style.marginTop=((canvsize-elem.offsetHeight)/2)+'px' 
    } 
    else 
    { 
     elem.style.MozTransform = 'rotate(' + deg + ')'; 
     elem.style.WebkitTransform = 'rotate(' + deg + ')'; 
     elem.style.OTransform  = 'rotate(' + deg + ')'; 
     elem.style.MsTransform  = 'rotate(' + deg + ')'; 
     elem.style.transform  = 'rotate(' + deg + ')'; 
    } 
} 

</script>

助けてもらえますか？

出典

2011-12-13 Andrey Rubliov

を追加するのを忘れ見ることができるように、ブラウザの検出が悪です。 'navigator.appName'は' 'Microsoft Internet Explorer ''に等しくフィルタがサポートされていないため、あなたのコードはIE10では動作しません。 '* transform'属性が' elem.style'に存在するかどうかを確認し、そうでない場合にのみフィルタをフォールバックしてください。 – duri

IE以外のブラウザでは、実際には簡単です。 MDNにはCSS3を使って行う方法についてgood documentationがあります。 hereもあります。

Webkitブラウザの場合は、this pageが役立ちます。

出典

2011-12-13 17:30:12 Bojangles

degをcssプロパティに追加しています。

また、画像の中央に回転するように画像にtransform originを追加する必要があります（これを行うと仮定して）。

このコードはそれを行う必要があります。

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 

<style> 
</style> 

</head> 
<body> 

<div id="frame1" style="overflow:hidden" width='300' height='300'> 
    <div id="frame2" width='200' height='200'> 
     <img src='1.jpeg' id='im' src='1.jpeg' width='10' height='10'> 
    </div> 
</div> 

<script type="text/javascript"> 

rotate(frame2, 45); 

function rotate (elem, deg) 
{ 
    if (navigator.appName=='Microsoft Internet Explorer') 
    { 
     rad = deg*Math.PI/180; 

     elem.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')"; 

     elem.filters.item(0).M11 = Math.cos(rad); 
     elem.filters.item(0).M12 = -Math.sin(rad); 
     elem.filters.item(0).M21 = Math.sin(rad); 
     elem.filters.item(0).M22 = Math.cos(rad); 
     elem.style.marginLeft=((canvsize-elem.offsetWidth)/2)+'px' 
     elem.style.marginTop=((canvsize-elem.offsetHeight)/2)+'px' 
    } 
    else 
    { 

     elem.style.MozTransformOrigin = "5px 5px"; 
     elem.style.WebkitTransformOrigin = "5px 5px"; 
     elem.style.OTransformOrigin = "5px 5px"; 
     elem.style.MsTransformOrigin = "5px 5px"; 
     elem.style.transformOrigin = "5px 5px"; 

     elem.style.MozTransform = 'rotate(' + deg + 'deg)'; 
     elem.style.WebkitTransform = 'rotate(' + deg + 'deg)'; 
     elem.style.OTransform  = 'rotate(' + deg + 'deg)'; 
     elem.style.MsTransform  = 'rotate(' + deg + 'deg)'; 
     elem.style.transform  = 'rotate(' + deg + 'deg)'; 
    } 
} 

</script> 

</body> 
</html>

出典

2011-12-13 17:38:04

多くの感謝、それは働いています！ –

問題ありません。ちなみに、1つの文字列を変数に定義し、各プロパティを定義された文字列変数に設定することを検討することもできます。将来的に値を変更する方がずっと簡単です。 –

CSSの例を見て：

-webkit-transform: rotate(45deg);

あなたがちょうどFYI 度

elem.style.mozTransform = 'rotate(' + deg + 'deg)'; 
elem.style.webkitTransform = 'rotate(' + deg + 'deg)'; 
elem.style.oTransform  = 'rotate(' + deg + 'deg)'; 
elem.style.msTransform  = 'rotate(' + deg + 'deg)'; 
elem.style.transform  = 'rotate(' + deg + 'deg)';

出典

2011-12-13 17:50:12 noob

最も簡単な説明は常にベストです – wubbewubbewubbe

IE以外のブラウザでJavaScriptのimage/divを回転させる方法

答えて

関連する問題