如何旋转 div Html 图层？答案

【问题标题】：How to rotate a div Html layer?如何旋转 div Html 图层？
【发布时间】：2012-09-15 00:01:10
【问题描述】：

我有一个这样的 Div 层

...
<style type="text/css">
<!--
#newImg {
    position:absolute;
    left:180px;
    top:99px;
    width:704px;
    height:387px;
    z-index:1;
    background-image:url(../Pictures/repbg.png);
    background-repeat:repeat;

}

-->
</style></head>

<body>

<div id="newImg" name="newImg" ></div>
...

如何旋转？

【问题讨论】：

你想旋转什么？以什么方式？动态、静态等。
页面加载后将 div 层旋转 45 度

标签： javascript css html

【解决方案1】：

您可以使用cssSandpaper 来使用transform 属性，该属性可用于在 Gecko (Firefox)、WebKit (Safari、Chrome)、Opera 甚至 Internet Explorer 中旋转元素。

【讨论】：

我投了这个票，因为它是第一个出现的，并且因为砂纸示例在我测试的浏览器中工作，IE7/8 和 FF。我懒得检查 jQuery 示例，但如果它有效，那将是我的偏好。

【解决方案2】：

这是一个可以旋转图片的jQuery插件：http://code.google.com/p/jquery-rotate/

【讨论】：

【解决方案3】：

//
// Rotate a <DIV> element
//
// - DIV position must be absolute or relative
// - Will use the center point of DIV as origin for tilt
//
// I think it will work on most browsers (including ie6, ie7 & ie8)
//
function divRotate( divObj, divTop, divLeft, divHeight, divWidth, newAngleDeg )
    {
    var radAngle = Math.PI * newAngleDeg / 180;
    var spinAngle = radAngle;

    if ( window.navigator.userAgent.indexOf ( 'MSIE ' ) <= 0 || typeof document.documentElement.style.opacity!='undefined' )
        radAngle = -radAngle;

    var sinAngle = parseFloat(parseFloat(Math.sin(radAngle)).toFixed(8));
    var cosAngle = parseFloat(parseFloat(Math.cos(radAngle)).toFixed(8));

    var m11 = cosAngle;
    var m12 = -sinAngle;
    var m21 = sinAngle;
    var m22 = cosAngle;

    if ( window.navigator.userAgent.indexOf ( 'MSIE ' ) <= 0 || typeof document.documentElement.style.opacity!='undefined' )
        {
        divObj.style.WebkitTransform = 'matrix('+ m11 +','+ m12 +','+ m21 +','+ m22 +',' + 0 + ',' + 0 + ')';
        divObj.style.MozTransform = 'matrix('+ m11 +','+ m12 +','+ m21 +','+ m22 +',' + 0 + 'px,' + 0 + 'px)';
        divObj.style.msTransform = 'matrix('+ m11 +','+ m12 +','+ m21 +','+ m22 +',' + 0 + ',' + 0 + ')';
        divObj.style.OTransform = 'matrix('+ m11 +','+ m12 +','+ m21 +','+ m22 +',' + 0 + ',' + 0 + ')';
        divObj.style.transform = 'matrix('+ m11 +','+ m12 +','+ m21 +','+ m22 +',' + 0 + ',' + 0 + ')';

        divObj.style.top = divTop + 'px';
        divObj.style.left = divLeft + 'px';

        return;
        }

    var sinSpinAngle = -parseFloat(parseFloat(Math.sin(-spinAngle)).toFixed(8));
    var cosSpinAngle = parseFloat(parseFloat(Math.cos(-spinAngle)).toFixed(8));
    var sinAnglePerp = parseFloat(parseFloat(Math.sin(radAngle-Math.PI)).toFixed(8));
    var cosAnglePerp = parseFloat(parseFloat(Math.cos(radAngle-Math.PI)).toFixed(8));
    var halfHeight = divHeight/2;
    var halfWidth = divWidth/2;
    var radius = Math.sqrt(halfHeight*halfHeight + halfWidth*halfWidth);

    var ulx = divLeft + halfWidth - radius*cosSpinAngle + sinAnglePerp*halfHeight;
    var uly = divTop + halfHeight - radius*sinSpinAngle + cosAnglePerp*halfHeight;

    var urx = radius*cosSpinAngle + divLeft + halfWidth + sinAnglePerp*halfHeight;
    var ury = radius*sinSpinAngle + divTop + halfHeight + cosAnglePerp*halfHeight;

    var lrx = radius*cosSpinAngle + divLeft + halfWidth - sinAnglePerp*halfHeight;
    var lry = radius*sinSpinAngle + divTop + halfHeight - cosAnglePerp*halfHeight;

    var llx = divLeft + halfWidth - radius*cosSpinAngle - sinAnglePerp*halfHeight;
    var lly = divTop + halfHeight - radius*sinSpinAngle - cosAnglePerp*halfHeight;

    divObj.style.filter = "filter: progid:DXImageTransform.Microsoft.Matrix( M11="+m11+", M12="+m12+", M21="+m21+", M22="+m22+", sizingMethod='auto expand' );";

    var spinTop = Math.min( uly, ury, lry, lly );
    var spinRight = Math.max( ulx, urx, lrx, llx );
    var spinBottom = Math.max( uly, ury, lry, lly );
    var spinLeft = Math.min( ulx, urx, lrx, llx );

    divObj.style.top = spinTop + 'px';
    divObj.style.right = spinRight + 'px';
    divObj.style.bottom = spinBottom + 'px';
    divObj.style.left = spinLeft + 'px';
    }

【讨论】：

【解决方案4】：

此时，在本机执行此操作的唯一方法是使用-moz-transform。

详情在这里。

https://developer.mozilla.org/en/CSS/-moz-transform

不过，这不跨浏览器兼容，因此使用风险自负。

~~更新：显然，还有一个 jQuery 插件可以为你做这件事：~~

http://plugins.jquery.com/project/Transform/

那里可能有更多的兼容性。

【讨论】：

如果用于完全不同的转换插件
我本来打算就“害怕显而易见的未说明”以及这仅在 Firefox 中如何工作发表评论，但随后我打开了链接并使用 Chrome 看到了它的实际效果。 -webkit-transform 显然也有效。
@dur。谢谢，我没有通读文档就将第二个选项放在那里（因为我要去开会）。