Jak dynamicznie ustawić styl -webkit-transform za pomocą JavaScript?

112

Chcę -webkit-transform: rotate()dynamicznie zmienić właściwość za pomocą JavaScript, ale często używany setAttributenie działa:

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

To też .stylenie działa ...

Jak mogę ustawić to dynamicznie w JavaScript?

javascript webkit rymn
źródło
nie ustawisz atrybutu stylu zamiast tylko tego
Muhammad Umer

Odpowiedzi:

201

Nazwy stylów JavaScript to WebkitTransformOriginiWebkitTransform

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

Sprawdź informacje o rozszerzeniach DOM dla WebKit tutaj .

Ólafur Waage
źródło
10
Jeśli chcesz więcej niż jeden, oddziel je spacją Na przykład: element.style.webkitTransform = "rotate(-2deg) translateX(100px)";
Marc
1
Działa to dobrze w Safari i Chrome, ale nie działa w Firefoksie. Jaki jest równoważny sposób zrobienia tego w przeglądarce Firefox?
Ricardo Sanchez-Saez
3
MozTransform powinien być Twoim przyjacielem.
haagmm,
@Olafur Link do Apple jest martwy.
Carcigenicate
Więc jest to jedyny sposób na zrobienie tego za pomocą łańcucha. Wydaje się, że byłoby to dość powolne, gdyby było rekurencyjne.
BBaysinger
89

Oto notacje JavaScript dla najpopularniejszych dostawców:

webkitProperty
MozProperty
msProperty
OProperty
property

Zresetowałem style transformacji wbudowanej, takie jak:

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

I tak używając jQuery:

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

Zobacz wpis na blogu Kodowanie prefiksów dostawców w języku JavaScript (2012-03-21).

Armel Larcier
źródło
5
jQuery automatycznie wybiera odpowiedni prefiks, wystarczy napisać transform.
Blaise
@Blaise To jest nowe. Począwszy od jakiej wersji?
Armel Larcier
1
Działa od wersji jQuery 1.8.0. Zobowiązanie na Github
Blaise
1
win.style.transform ="translate(-50%)"nie działa
Momin
11

Spróbuj użyć

img.style.webkitTransform = "rotate(60deg)"
Andrei Serdeliuc ॐ
źródło
5

Jeśli chcesz to zrobić za pośrednictwem setAttribute, zmień styleatrybut w następujący sposób:

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

Byłoby to pomocne, jeśli chcesz zresetować wszystkie inne style wbudowane i ponownie ustawić tylko potrzebne wartości właściwości stylu, ALE w większości przypadków możesz tego nie chcieć. Dlatego wszyscy radzili używać tego:

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

Powyższe jest równoważne z

element.style['transform'] = 'rotate(90deg)';
element.style['-webkit-transform'] = 'rotate(90deg)';
thednp
źródło
2

Aby animować swój obiekt 3D, użyj kodu: 

<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
źródło