How to rotate imagediv in JavaScript in browsers other than IE

I need to rotate an image dinamically by angle specified by the user.

I use the following code, but it only works for IE and not for any other browser.

<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>

Can you please help?

I need to rotate an image dinamically by angle specified by the user.

I use the following code, but it only works for IE and not for any other browser.

<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>

Can you please help?

Share Improve this question asked Dec 13, 2011 at 17:25 Andrey Rubliov 1,5973 gold badges19 silver badges25 bronze badges

Just FYI, browser detection is evil. Your code won't work in IE10 because navigator.appName equals to 'Microsoft Internet Explorer' but support for filters was removed. Better check if some *transform attribute is present in elem.style and only if not, use filters fallback. – duri Commented Dec 13, 2011 at 18:06

Add a ment |

3 Answers 3

Sorted by: Reset to default 7

Look at a CSS example:

-webkit-transform: rotate(45deg);

As you can see you forgot to add deg

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)';

It's actually easier in browsers that aren't IE. The MDN has good documentation on how to do it with CSS3. There's some here as well.

For Webkit browsers, this page should help.

You forgot to add deg to the css property.

You should also add a transform origin to the image to make it rotate around the center (assuming that's what you're trying to do).

This code should do it.

<!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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

How to rotate imagediv in JavaScript in browsers other than IE - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)