How to rotate a div Html layer?

2020-06-27 09:24发布

站内问答 / JavaScript
1401 4 4

I have a Div layer like this

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

How to rotate it?

4条回答
太酷不给撩
2楼-- · 2020-06-27 09:49

The only way to do it natively at this point is to use -moz-transform.

Details are here.

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

This is not cross-browser compatible, though, so use at your own risk.

Update: Apparently, there is also a jQuery plug-in that will do it for you:

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

Probably a little more compatibility there.

查看更多
0人赞 添加讨论(0) 举报
Root（大扎）
3楼-- · 2020-06-27 09:53 
//
// 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';
    }
查看更多
0人赞 添加讨论(0) 举报
Deceive 欺骗
4楼-- · 2020-06-27 09:55

This is a jQuery plugin that will rotate the image: http://code.google.com/p/jquery-rotate/

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
5楼-- · 2020-06-27 09:56

You can use cssSandpaper to use the transform property which can be used to rotate elements in Gecko (Firefox), WebKit (Safari, Chrome), Opera and even Internet Explorer.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)