Bagaimana cara menyetel gaya -webkit-transform secara dinamis menggunakan JavaScript?

112

Saya ingin mengubah -webkit-transform: rotate()properti menggunakan JavaScript secara dinamis, tetapi yang umum digunakan setAttributetidak berfungsi:

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

Ini .stylejuga tidak berfungsi ...

Bagaimana saya bisa mengatur ini secara dinamis di JavaScript?

javascript webkit

— rymn
sumber

tidakkah Anda akan menetapkan atribut gaya alih-alih hanya yang ini

— Muhammad Umer

201

Nama gaya JavaScript adalah WebkitTransformOrigindanWebkitTransform

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

Periksa referensi ekstensi DOM untuk WebKit di sini .

— Ólafur Waage
sumber

9

Jika Anda ingin lebih dari satu, terpisah dengan ruang Misalnya: element.style.webkitTransform = "rotate(-2deg) translateX(100px)";

— Marc

1

Ini berfungsi dengan baik di Safari dan Chrome, tetapi tidak akan berfungsi di Firefox. Apa cara yang setara untuk melakukan ini untuk Firefox?

— Ricardo Sanchez-Saez

3

MozTransform harus menjadi teman Anda.

— haagmm

@Olafur Tautan Apple sudah mati.

— Carcigenicate

Jadi, satu-satunya cara untuk melakukan ini dengan tali. Sepertinya akan sangat lambat jika rekursif.

— BBaysinger

89

Berikut adalah notasi JavaScript untuk vendor paling umum:

webkitProperty
MozProperty
msProperty
OProperty
property

Saya mengatur ulang gaya transformasi inline seperti:

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

Dan seperti ini menggunakan jQuery:

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

Lihat entri blog Coding Vendor Prefixes dengan JavaScript (2012-03-21).

— Armel Larcier
sumber

5

jQuery secara otomatis memilih awalan yang tepat, hanya perlu menulis transform.

— Blaise

@Blaise Itu baru. Mulai dari versi apa?

— Armel Larcier

1

Itu sejak jQuery 1.8.0. Berkomitmen di Github

— Blaise

1

win.style.transform ="translate(-50%)"tidak bekerja

— Momin

11

Coba gunakan

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

— Andrei Serdeliuc ॐ
sumber

5

Jika Anda ingin melakukannya melalui setAttributeAnda akan mengubah styleatribut seperti ini:

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

Ini akan berguna jika Anda ingin menyetel ulang semua gaya sebaris lainnya dan hanya menyetel kembali nilai properti gaya yang Anda butuhkan, TETAPI dalam banyak kasus Anda mungkin tidak menginginkannya. Itulah mengapa semua orang menyarankan untuk menggunakan ini:

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

Di atas sama dengan

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

— thednp
sumber

2

Untuk menganimasikan objek 3D Anda, gunakan kode:

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