Làm cách nào để đặt động kiểu -webkit-biến đổi bằng JavaScript?

112

Tôi muốn thay đổi thuộc -webkit-transform: rotate()tính bằng JavaScript động, nhưng thuộc tính thường được sử dụng setAttributekhông hoạt động:

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

Nó .stylecũng không hoạt động ...

Làm cách nào để tôi có thể đặt động này trong JavaScript?

javascript webkit

— rymn
nguồn

wont làm bạn thuộc tính phong cách thiết lập thay vì chỉ một này

— Muhammad Umer

201

Tên kiểu JavaScript là WebkitTransformOriginvàWebkitTransform

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

Kiểm tra tham chiếu phần mở rộng DOM cho WebKit tại đây .

— Ólafur Waage
nguồn

9

Nếu bạn muốn nhiều hơn thì một, hãy phân tách bằng dấu cách Ví dụ: element.style.webkitTransform = "rotate(-2deg) translateX(100px)";

— Marc

1

Điều này hoạt động tốt trên Safari và Chrome, nhưng sẽ không hoạt động trên Firefox. Cách tương tự để làm điều này cho Firefox là gì?

— Ricardo Sanchez-Saez

3

MozTransform nên là bạn của bạn.

— haagmm

@Olafur Liên kết Apple đã chết.

— Carcigenicate

Vì vậy, là cách duy nhất để làm điều này với một chuỗi. Có vẻ như nó sẽ khá chậm nếu nó là đệ quy.

— BBaysinger

89

Dưới đây là các ký hiệu JavaScript cho hầu hết các nhà cung cấp phổ biến:

webkitProperty
MozProperty
msProperty
OProperty
property

Tôi đặt lại các kiểu chuyển đổi nội tuyến như:

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

Và như thế này bằng cách sử dụng jQuery:

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

Xem bài đăng trên blog Mã hóa tiền tố của nhà cung cấp bằng JavaScript (2012-03-21).

— Armel Larcier
nguồn

5

jQuery tự động chọn tiền tố phù hợp, chỉ cần viết transform.

— Blaise

@Blaise Đó là mới. Bắt đầu từ phiên bản nào?

— Armel Larcier

1

Nó hoạt động kể từ jQuery 1.8.0. Cam kết trên Github

— Blaise

1

win.style.transform ="translate(-50%)"không hoạt động

— Momin

11

Hãy thử sử dụng

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

— Andrei Serdeliuc ॐ
nguồn

5

Nếu bạn muốn làm điều đó thông qua, setAttributebạn sẽ thay đổi stylethuộc tính như sau:

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

Điều này sẽ hữu ích nếu bạn muốn đặt lại tất cả các kiểu nội tuyến khác và chỉ đặt lại các giá trị thuộc tính kiểu cần thiết của bạn, NHƯNG trong hầu hết các trường hợp, bạn có thể không muốn điều đó. Đó là lý do tại sao mọi người khuyên nên sử dụng cái này:

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

Ở trên tương đương với

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

— thednp
nguồn

2

Để tạo hoạt ảnh cho đối tượng 3D của bạn, hãy sử dụng mã:

<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
nguồn