我有像这样的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>
...
如何旋转它?
答案 0 :(得分:7)
您可以使用cssSandpaper来使用transform
属性,该属性可用于旋转Gecko(Firefox),WebKit(Safari,Chrome),Opera甚至Internet Explorer中的元素。
答案 1 :(得分:2)
这是一个jQuery插件,可以旋转图像:http://code.google.com/p/jquery-rotate/
答案 2 :(得分:1)
//
// 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';
}
答案 3 :(得分:0)
此时本地执行此操作的唯一方法是使用-moz-transform
。
详细信息在这里。
https://developer.mozilla.org/en/CSS/-moz-transform
这是不跨浏览器兼容,因此使用风险自负。
更新:显然,还有一个jQuery插件可以帮到你:
http://plugins.jquery.com/project/Transform/
可能还有一点兼容性。