如何旋轉div Html圖層？

我有這樣如何旋轉div Html圖層？

... 
<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層如何旋轉呢？

來源

2010-03-15 Rella

你想旋轉什麼？以什麼方式？動態地，靜態地等等。 – zellio 2010-03-15 18:58:23

旋轉div頁面45度後頁面ladod – Rella 2010-03-15 19:00:29

此時本地執行此操作的唯一方法是使用-moz-transform。

詳情在這裏。

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

這是不跨瀏覽器兼容，雖然如此，在你自己的風險。

~~更新：顯然，還有一個jQuery插件，將你做它：~~

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

~~可能多一點的兼容性存在。~~

來源

2010-03-15 18:58:49 dclowd9901

該變換插件，如果完全不同 – 2010-03-15 19:00:57

我要做一個關於「恐懼顯而易見未定義」，以及這是如何工作在Firefox中，但然後我打開鏈接和使用Chrome瀏覽器看到了這一點。 '-webkit-transform'顯然也適用。 – keithjgrant 2010-03-15 19:01:46

@dur。謝謝我在沒有閱讀文檔的情況下向其扔了第二個選項（因爲我正在參加會議）。 – dclowd9901 2010-03-15 20:37:12

這是一個jQuery插件，將旋轉圖像：http://code.google.com/p/jquery-rotate/

來源

2010-03-15 19:01:45

可以使用cssSandpaper使用transform屬性，該屬性可以被用於旋轉壁虎（Firefox）的元素，WebKit的（野生動物園，鉻）， Opera甚至Internet Explorer。

來源

2010-03-15 19:05:55

我投這個票，因爲它在這裏第一，並且因爲沙紙實例在我測試的瀏覽器中工作，IE7/8和FF。我懶得去檢查jQuery的例子，但如果它的工作原理，那將是我的偏好。 – 2010-03-15 19:58:55

+1「甚至Internet Explorer」。 – Sphvn 2010-03-16 02:12:26

// 
// 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'; 
    }

來源

2012-09-14 16:01:10

如何旋轉div Html圖層？

回答

相關問題