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

css style tooltip bootstrap

Question

Deseo cambiar la -webkit-transform: rotate() usando JavaScript dinámicamente, pero el setAttribute uso setAttribute no funciona:

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

The .style tampoco funciona ...

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

Answer 1

Aquí están las anotaciones de JavaScript para la mayoría de los vendedores comunes:

webkitProperty
MozProperty
msProperty
OProperty
property

Restablecí los 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 proveedor con JavaScript (2012-03-21).

Answer 2

Intenta usar

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

Answer 3

Los nombres de estilo de JavaScript son WebkitTransformOrigin y WebkitTransform

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

Consulte la referencia de extensión DOM para WebKit here .

Answer 4

Si quieres hacerlo a través de setAttribute , cambiarías el atributo de style así:

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

Esto sería útil si desea restablecer el resto del estilo en línea y solo establecer los valores de las propiedades de estilo necesarias de nuevo, PERO en la mayoría de los casos, es posible que no lo desee. Es por eso que todo el mundo aconseja 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)'';

Answer 5

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>