Come impostare l'angolo di rotazione di un div in javascript?

O più in generale, c'è un modo per aggiungere CSS arbitrario a un elemento HTML in javascript senza JQuery?Come impostare l'angolo di rotazione di un div in javascript?

In questo momento funziona in Chrome, Firefox e IE 9/10.

var css = getRotationCSS(angle); 
var div = document.getElementById('mydiv'); 
//div.css = css; ??? 
div.innerHTML = '<div style="'+css+'">HELLO</div>';

devo aggiungere un div all'interno del div per arrivare allo stile = ''

Tutti gli esempi che ho visto appena hanno un angolo di hardcoded ma ho bisogno di lavorare per qualsiasi angolazione 0- 360, dovrei fare 360 lezioni, 1 per ogni grado, quindi impostare la classe?

function getRotationCSS(deg) 
{ 
    return "\ 
     -webkit-transform: rotate("+deg+"deg); \ 
     -moz-transform: rotate("+deg+"deg); \ 
     -ms-transform: rotate("+deg+"deg); \ 
     -o-transform: rotate("+deg+"deg); \ 
     transform: rotate("+deg+"deg); \ 
     -ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)'; \ 
     filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); \ 
    "; 
}

Sì, il codice IE 7/8 non è corretto, ho bisogno di una funzione per convertire i gradi in una matrice.

Anche il codice di IE 7/8 non ruota affatto quando ho emulare IE 7/8 nel mio IE 10. Ho cercato su google il codice e si suppone di ruotarlo di 45:

<html> 
    <body> 
     <div style='border:1px solid green;margin:333px;padding:333px;'> 
      <div style=" 
       -webkit-transform: rotate(45deg); 
       -moz-transform: rotate(45deg); 
       -ms-transform: rotate(45deg); 
       -o-transform: rotate(45deg); 
       transform: rotate(45deg); 
       -ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)\"; 
       filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); 
      "> 
       HELLO 
      </div> 
     </div> 
    </body> 
</html>

fonte

2013-05-16 Curtis

Non dovresti sapere quale css trasformare per applicare tramite javascript (utilizzando la funzione di rilevamento)? – Alan

No js fiddle? CHE COSA? : O – Senjai

utilizzare la seguente per creare la matrice di rotazione corretta per deg:

// First compute deg in radians 
var rad = deg*Math.PI/180; 

// Then when specifying the rotation matrices use: 
'... M11=' + Math.cos(rad) + 
    ', M12=' + -Math.sin(rad) + 
    ', M21=' + Math.sin(rad) + 
    ', M22=' + Math.cos(rad) + ' ...'

anche per ms-filter non utilizzare le virgolette singole, dal momento che si utilizza virgolette singole all'interno della stringa per 'auto expand' Modificare le citazioni esterne a doppi apici e fuggire correttamente :

-ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', ...

fonte

2013-05-16 02:41:30 Paulpro

Grazie per il suggerimento ma non è ancora in rotazione in IE 7 o 8. Ho aggiunto un esempio completo di HTML. – Curtis

Questo codice ruotare -45 gradi

in cioè 7-8 troppo.

<div style=" 
    width: 200px; 
    height: 14px; 
    border: none; 
    background-image: url(http://image.ohozaa.com/i/47d/vliemC.png); 
    text-align: center; 
    color: #fff; 
    font-size: 14px; 
    line-height: 16px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M22=0.7071067811865476, M21=-0.7071067811865475, M12=0.7071067811865475, M11=0.7071067811865476); /* IE6,IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M22=0.7071067811865476, M21=-0.7071067811865475, M12=0.7071067811865475, M11=0.7071067811865476)"; /* IE8 */ 
    transform: rotate(-45deg); 
"> 
</div> 
<style type="text/css"> 
</style>

fonte

2014-03-13 13:48:27 user3282833

Come impostare l'angolo di rotazione di un div in javascript?

risposta

Problemi correlati