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

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