¿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

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