JavaScript kullanarak -webkit-transform stilini dinamik olarak nasıl ayarlayabilirim?

112

-webkit-transform: rotate()Özelliği dinamik olarak JavaScript kullanarak değiştirmek istiyorum , ancak yaygın olarak kullanılan setAttributeçalışmıyor:

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

.styleYa çalışmıyor ...

Bunu JavaScript'te dinamik olarak nasıl ayarlayabilirim?

javascript webkit

— rymn
kaynak

sadece bunun yerine stil niteliği ayarlamayacaksın

— Muhammed Umer

201

JavaScript stil isimleri WebkitTransformOriginveWebkitTransform

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

WebKit için DOM uzantısı referansını buradan kontrol edin .

— Ólafur Waage
kaynak

10

Eğer Örneğin bir boşlukla ayrı daha sonra bir tane, isterseniz: element.style.webkitTransform = "rotate(-2deg) translateX(100px)";

— Marc

1

Bu, Safari ve Chrome'da sorunsuz çalışır, ancak Firefox'ta çalışmaz. Bunu Firefox için yapmanın eşdeğer yolu nedir?

— Ricardo Sanchez-Saez

3

MozTransform senin arkadaşın olmalı.

— haagmm

@Olafur Apple bağlantısı kesildi.

— Carcigenicate

Bunu bir dizeyle yapmanın tek yolu budur. Özyinelemeli olsaydı oldukça yavaş olacak gibi görünüyor.

— BBaysinger

89

En yaygın satıcılar için JavaScript gösterimleri şunlardır:

webkitProperty
MozProperty
msProperty
OProperty
property

Satır içi dönüştürme stillerini şu şekilde sıfırlarım:

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

Ve jQuery kullanarak bunun gibi:

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

JavaScript ile Satıcı Öneklerini Kodlayan blog gönderisine bakın (2012-03-21).

— Armel Larcier
kaynak

5

jQuery otomatik olarak doğru öneki seçer, yalnızca yazması gerekir transform.

— Blaise

@Blaise Bu yeni. Hangi versiyondan başlayarak?

— Armel Larcier 01

1

JQuery 1.8.0'dan beri var. Github'a Bağlılık

— Blaise

1

win.style.transform ="translate(-50%)"çalışmıyor

— Momin

11

Kullanmayı dene

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

— Andrei Serdeliuc ॐ
kaynak

5

Bunu kullanarak yapmak setAttributeisterseniz, styleözelliği şu şekilde değiştirirsiniz :

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

Bu, diğer tüm satır içi stili sıfırlamak ve yalnızca ihtiyaç duyduğunuz stil özelliklerinin değerlerini yeniden ayarlamak istiyorsanız yararlı olacaktır, ANCAK çoğu durumda bunu istemeyebilirsiniz. Bu yüzden herkes bunu kullanmasını tavsiye etti:

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

Yukarıdakiler eşdeğerdir

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

— thednp
kaynak

2

3B nesnenizi canlandırmak için kodu kullanın:

<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
kaynak