Как повернуть слой div Html?

У меня есть слой Div как этотКак повернуть слой 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> 
...

Как повернуть его?

источник

2010-03-15 Rella

Что вы пытаетесь повернуть? и каким образом? Динамически, статически и так далее. – zellio

Поворот div-слоя на 45 градусов после ладоней страницы – Rella

Единственный способ сделать это изначально на этом этапе - использовать -moz-transform.

Подробная информация здесь.

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

Это не кросс-браузер, совместимый, хотя, так что используйте на свой страх и риск.

~~Update: По-видимому, есть и 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

Вы можете использовать cssSandpaper использовать transform свойство, которое может быть использовано для вращения элементов в Gecko (Firefox), WebKit (Safari, Chrome), Opera и даже Internet Explorer.

источник

2010-03-15 19:05:55

Я проголосовал за это, потому что он был здесь первым, и потому, что примеры наждачной бумаги работали в браузерах, которые я тестировал, IE7/8 и FF. Мне слишком ленив, чтобы проверить пример jQuery, хотя, если он будет работать, это будет мое предпочтение. –

+1 для «и даже Internet Explorer». – 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?

ответ

Смежные вопросы