Jak ustawić dynamicznie styl -webkit-transform przy użyciu JavaScript?

Chcę zmienić właściwość -webkit-transform: rotate() przy użyciu JavaScript dynamicznie. Ale powszechnie stosowane setAttribute nie działa:Jak ustawić dynamicznie styl -webkit-transform przy użyciu JavaScript?

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

.style nie działa albo ...

Jak mogę ustawić to dynamicznie w JavaScript? Wiem, że niektórzy z was mają doświadczenie w radzeniu sobie z tym wcześniej.

Źródło

2009-04-02 rymn

przyzwyczajenie ustawić atrybut stylu zamiast tylko tego –

172

Nazwy stylów i JavaScript są WebkitTransformOriginWebkitTransform

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

Sprawdź odniesienie przedłużacza Dom na WebKit here.

Źródło

2009-04-02 09:08:26

Dzięki za pomoc! –

Jeśli chcesz więcej niż jeden, oddziel go spacją Na przykład: 'element.style.webkitTransform =" obróć (-2deg) translateX (100px) ";' – Marc

Działa to dobrze w Safari i Chrome, ale wygrał ' t działa na Firefox. Jaki jest równoważny sposób robienia tego w Firefoksie? –

Spróbuj użyć

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

Źródło

2009-04-02 09:07:26

Oto oznaczenia JavaScript do najczęstszych sprzedawców:

webkitProperty 
MozProperty 
msProperty 
OProperty 
property

zresetować inline przekształcają style takie jak:

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

I jak to przy użyciu jQuery:

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

Zobacz blog po Coding Vendor Prefixes with JavaScript (2012-03- 21).

Źródło

2013-01-29 15:00:57

okrzyki kolegi! dzięki –

ha, idealnie. Właśnie chciałem google dla innych notatek. Ale niewiele wiedziałem, że przewinęłabym 3-kę, a twoja odpowiedź byłaby tam: D –

jQuery automatycznie wybiera właściwy prefiks, wystarczy napisać 'transform'. – Blaise

Jeśli chcesz to zrobić poprzez setAttribute chcesz zmienić atrybut style tak:

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

Byłoby to pomocne, jeśli chcesz przywrócić wszystkie inne style i tylko ustawić wartości swoich potrzebne właściwości stylu znowu, ale w większości przypadków możesz tego nie chcieć. Dlatego wszyscy powinni to wykorzystać:

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

Powyższe jest równoważna

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

Źródło

2015-04-27 01:10:19 thednp

Aby animować obiekt 3D, należy użyć 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>

Źródło

2016-02-16 11:55:29

Jak ustawić dynamicznie styl -webkit-transform przy użyciu JavaScript?

Odpowiedz

Powiązane problemy