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

Answer 2

在不是IE的浏览器中实际上更容易。关于如何使用CSS3，MDN有good documentation。还有一些here。

对于Webkit浏览器，this page应该有帮助。

Answer 3

您忘记将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>

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

3 个答案: