Come impostare lo stile -webkit-transform in modo dinamico usando JavaScript?

Desidero modificare la proprietà -webkit-transform: rotate() utilizzando JavaScript in modo dinamico. Ma il setAttribute comunemente usato non funziona:Come impostare lo stile -webkit-transform in modo dinamico usando JavaScript?

img.setAttribute('-webkit-transform', 'rotate(60deg)');

La .style non funziona o ...

Come posso impostare questa dinamicamente in JavaScript? So che alcuni di voi hanno già avuto esperienza in questo.

fonte

2009-04-02 rymn

solito si imposta attributo di stile invece di questo solo –

172

I nomi di stile JavaScript sono WebkitTransformOrigin e WebkitTransform

element.style.webkitTransform = "rotate(-2deg)";

Controllare il riferimento estensione DOM per WebKit here.

fonte

2009-04-02 09:08:26

Grazie per l'aiuto! –

Se ne desideri più di uno, separalo con uno spazio Ad esempio: 'element.style.webkitTransform =" ruota (-2deg) translateX (100px) ";' – Marc

Funziona bene su Safari e Chrome, ma ha vinto ' t lavorare su Firefox. Qual è il modo equivalente di farlo per Firefox? –

provare a utilizzare

img.style.webkitTransform = "rotate(60deg)"

fonte

2009-04-02 09:07:26

Qui ci sono le notazioni JavaScript per i venditori più comuni:

webkitProperty 
MozProperty 
msProperty 
OProperty 
property

reimposta linea trasformo stili come:

element.style.webkitTransform = ""; 
element.style.MozTransform = ""; 
element.style.msTransform = ""; 
element.style.OTransform = ""; 
element.style.transform = "";

E come questo utilizzando jQuery:

$(element).css({ 
    "webkitTransform":"", 
    "MozTransform":"", 
    "msTransform":"", 
    "OTransform":"", 
    "transform":"" 
});

See blog post Coding Vendor Prefixes with JavaScript (2012-03- 21).

fonte

2013-01-29 15:00:57

acclamazioni amico! grazie –

ha, perfetto. Stavo per andare su Google per le altre notazioni. Ma non sapevo che avrei fatto scorrere un merr 3px e la tua risposta sarebbe stata lì: D –

jQuery seleziona automaticamente il prefisso giusto, deve solo scrivere 'transform'. – Blaise

Se si vuole farlo via setAttribute cambieresti l'attributo style in questo modo:

element.setAttribute('style','transform:rotate(90deg); -webkit-transform: rotate(90deg)') //etc

Questo sarebbe utile se si desidera ripristinare tutti gli altri stile in linea e impostare solo i valori le proprietà di stile necessari di nuovo, MA nella maggior parte dei casi potresti non volerlo. Ecco perché ognuno ha consigliato di utilizzare questo:

element.style.transform = 'rotate(90deg)'; 
element.style.webkitTransform = 'rotate(90deg)';

Quanto sopra è equivalente a

element.style['transform'] = 'rotate(90deg)'; 
element.style['-webkit-transform'] = 'rotate(90deg)';

fonte

2015-04-27 01:10:19 thednp

Per animare il vostro oggetto 3D, utilizzare il codice:

<script> 

$(document).ready(function(){ 

    var x = 100; 
    var y = 0; 
setInterval(function(){ 
    x += 1; 
    y += 1; 
    var element = document.getElementById('cube'); 
    element.style.webkitTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for safari and chrome 
    element.style.MozTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for firefox 
},50); 
//for other browsers use: "msTransform", "OTransform", "transform" 

}); 

</script>

fonte

2016-02-16 11:55:29

Come impostare lo stile -webkit-transform in modo dinamico usando JavaScript?

risposta

Problemi correlati