Como definir o estilo -webkit-transform dinamicamente usando JavaScript?

112

Desejo alterar a -webkit-transform: rotate()propriedade usando JavaScript dinamicamente, mas o comumente usado setAttributenão está funcionando:

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

O .styletambém não está funcionando ...

Como posso definir isso dinamicamente em JavaScript?

javascript webkit

— rino
fonte

você não vai definir o atributo de estilo em vez de apenas este

— Muhammad Umer

201

Os nomes de estilo JavaScript são WebkitTransformOrigineWebkitTransform

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

Verifique a referência de extensão DOM para WebKit aqui .

— Ólafur Waage
fonte

9

Se você quiser mais de um, separe com um espaço. Por exemplo: element.style.webkitTransform = "rotate(-2deg) translateX(100px)";

— Marc

1

Isso funciona bem no Safari e no Chrome, mas não funciona no Firefox. Qual é a forma equivalente de fazer isso no Firefox?

— Ricardo Sanchez-Saez

3

MozTransform deve ser seu amigo.

— haagmm

@Olafur O link da Apple está morto.

— Carcigenicar

Portanto, é a única maneira de fazer isso com uma corda. Parece que seria muito lento se fosse recursivo.

— BBaysinger

89

Aqui estão as notações de JavaScript para os fornecedores mais comuns:

webkitProperty
MozProperty
msProperty
OProperty
property

Eu redefino estilos de transformação inline como:

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

E assim usando jQuery:

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

Consulte a postagem no blog Coding Vendor Prefixes with JavaScript (2012-03-21).

— Armel Larcier
fonte

5

jQuery escolhe automaticamente o prefixo certo, apenas tem que escrever transform.

— Blaise

@Blaise Isso é novo. Partindo de qual versão?

— Armel Larcier

1

Desde jQuery 1.8.0. Commit on Github

— Blaise

1

win.style.transform ="translate(-50%)"não funciona

— Momin

11

Tente usar

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

— Andrei Serdeliuc ॐ
fonte

5

Se você quiser fazer isso por meio setAttribute, altere o styleatributo da seguinte forma:

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

Isso seria útil se você deseja redefinir todos os outros estilos embutidos e apenas definir os valores das propriedades de estilo necessárias novamente, MAS na maioria dos casos você pode não querer isso. É por isso que todo mundo aconselhou a usar isso:

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

O acima é equivalente a

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

— thednp
fonte

2

Para animar seu objeto 3D, use o 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
fonte