¿Cómo configurar el estilo -webkit-transform dinámicamente usando JavaScript?

112

Quiero cambiar la -webkit-transform: rotate()propiedad usando JavaScript dinámicamente, pero el que se usa comúnmente setAttributeno funciona:

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

El .styletampoco funciona ...

¿Cómo puedo configurar esto dinámicamente en JavaScript?

javascript webkit rymn
fuente
¿No establecerás el atributo de estilo en lugar de solo este?
Muhammad Umer

Respuestas:

201

Los nombres de estilo de JavaScript son WebkitTransformOriginyWebkitTransform

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

Consulte la referencia de la extensión DOM para WebKit aquí .

Ólafur Waage
fuente
9
Si desea más de uno, separe con un espacio Por ejemplo: element.style.webkitTransform = "rotate(-2deg) translateX(100px)";
Marc
1
Esto funciona bien en Safari y Chrome, pero no funciona en Firefox. ¿Cuál es la forma equivalente de hacer esto para Firefox?
Ricardo Sanchez-Saez
3
MozTransform debería ser tu amigo.
haagmm
@Olafur El enlace de Apple está muerto.
Carcigenicate
Entonces, es la única forma de hacer esto con una cadena. Parece que sería bastante lento si fuera recursivo.
BBaysinger
89

Aquí están las notaciones de JavaScript para los proveedores más comunes:

webkitProperty
MozProperty
msProperty
OProperty
property

Restablezco estilos de transformación en línea como:

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

Y así usando jQuery:

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

Consulte la publicación de blog Codificación de prefijos de proveedores con JavaScript (2012-03-21).

Armel Larcier
fuente
5
jQuery elige automáticamente el prefijo correcto, solo tiene que escribir transform.
Blaise
@Blaise Eso es nuevo. ¿A partir de qué versión?
Armel Larcier
1
Lo hace desde jQuery 1.8.0. Comprometerse en Github
Blaise
1
win.style.transform ="translate(-50%)"no funciona
Momin
11

Intenta usar

img.style.webkitTransform = "rotate(60deg)"
Andrei Serdeliuc ॐ
fuente
5

Si desea hacerlo a través de setAttribute, cambiaría el styleatributo así:

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

Esto sería útil si desea restablecer todos los demás estilos en línea y solo volver a establecer los valores de las propiedades de estilo necesarios, PERO en la mayoría de los casos es posible que no desee eso. Es por eso que todos aconsejaron usar esto:

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

Lo anterior es equivalente a

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

Para animar su objeto 3D, use el código: 

<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>
Dhruv Dholakia
fuente