如何在IE以外的浏览器中旋转JavaScript中的image/div

Question

我需要按照用户指定的角度动态旋转图像.

我使用以下代码,但它只适用于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>

你能帮忙吗？

Answer 1

看一下CSS示例:

-webkit-transform: rotate(45deg);

你可以看到你忘记添加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)';