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

페이지 레이드 후 div 레이어를 45도 회전하십시오. – Rella

이 시점에서 네이티브 방식으로 수행하는 유일한 방법은 -moz-transform을 사용하는 것입니다.

자세한 내용은 여기입니다.

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

이

하지만,하지 크로스 브라우저 호환 , 그래서 자신의 위험에 사용합니다.

~~업데이트 : 분명히, 또한 jQuery를이 플러그인이 당신을 위해 그것을 할 것입니다 :~~

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

~~아마 조금 더 호환성이.~~

출처

2010-03-15 18:58:49 dclowd9901

전혀 다른 경우 해당 Transform 플러그인 –

"명백한 무언가에 대한 두려움"에 대해 의견을 말하고 Firefox에서 어떻게 작동합니까? Chrome을 사용하여 실제로 작동합니다. '-webkit-transform' 역시 명백하게 작동합니다. – keithjgrant

@dur. 고마워요. 나는 회의실로 향하고 있었기 때문에 의사를 통해 읽지 않고 두 번째 옵션을 던졌습니다. – dclowd9901

이있는 이미지를 회전하는 jQuery 플러그인 : http://code.google.com/p/jquery-rotate/

출처

2010-03-15 19:01:45

당신은 게코 (파이어 폭스)의 요소를 회전하는 데 사용할 수있는 transform 특성, 웹킷 (사파리, 크롬)를 사용하는 cssSandpaper을 사용할 수 있습니다, 오페라, 심지어 Internet Explorer.

출처

2010-03-15 19:05:55

IE7/8과 FF로 테스트 한 브라우저에서 샌드 페이퍼 예제가 작동했기 때문에 첫 번째로 여기에 투표 했으므로 투표했습니다. jQuery 예제를 확인하기가 너무 어리지만, 작동하는 경우 이것이 내 기본 설정입니다. –

+1 및 "인터넷 익스플로러조차도." – Sphvn

// 
// 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 레이어를 회전하는 방법은 무엇입니까?

답변

관련 문제