วิธีตั้งค่าสไตล์ -webkit-transform แบบไดนามิกโดยใช้ JavaScript?

112

ฉันต้องการเปลี่ยน-webkit-transform: rotate()คุณสมบัติโดยใช้ JavaScript แบบไดนามิก แต่ที่ใช้กันทั่วไปsetAttributeไม่ทำงาน:

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

.styleไม่ทำงานอย่างใดอย่างหนึ่ง ...

ฉันจะตั้งค่าแบบไดนามิกใน JavaScript ได้อย่างไร

javascript webkit

— rymn
แหล่งที่มา

คุณจะไม่ตั้งค่าแอตทริบิวต์สไตล์แทนที่จะเป็นแบบนี้

— Muhammad Umer

201

ชื่อสไตล์ JavaScript คือWebkitTransformOriginและWebkitTransform

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

ตรวจสอบการอ้างอิงขยาย DOM สำหรับ WebKit ที่นี่

— Ólafur Waage
แหล่งที่มา

10

หากคุณต้องการมากกว่านั้นให้แยกช่องว่างตัวอย่างเช่น element.style.webkitTransform = "rotate(-2deg) translateX(100px)";

— Marc

1

ใช้งานได้ดีบน Safari และ Chrome แต่จะใช้ไม่ได้กับ Firefox วิธีที่เทียบเท่ากับการทำเช่นนี้สำหรับ Firefox คืออะไร?

— Ricardo Sanchez-Saez

3

MozTransform ควรเป็นเพื่อนของคุณ

— haagmm

@Olafur ลิงค์ Apple ตายแล้ว

— Carcigenicate

วิธีเดียวที่จะทำได้กับสตริง ดูเหมือนว่ามันจะค่อนข้างช้าถ้ามันวนซ้ำ

— BBaysinger

89

นี่คือสัญลักษณ์ JavaScript สำหรับผู้ให้บริการทั่วไป:

webkitProperty
MozProperty
msProperty
OProperty
property

ฉันรีเซ็ตรูปแบบการแปลงแบบอินไลน์เช่น:

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

และเช่นนี้โดยใช้ jQuery:

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

ดูบล็อกโพสต์Coding Vendor Prefixes ด้วย JavaScript (2012-03-21)

— Armel Larcier
แหล่งที่มา

5

jQuery จะเลือกคำนำหน้าที่ถูกต้องโดยอัตโนมัติต้องเขียนtransformเท่านั้น

— Blaise

@Blaise ที่ใหม่. เริ่มจากรุ่นอะไร?

— Armel Larcier

1

มันทำตั้งแต่ jQuery 1.8.0 Commit on Github

— Blaise

1

win.style.transform ="translate(-50%)"ไม่ทำงาน

— Momin

11

ลองใช้

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

— Andrei Serdeliuc ॐ
แหล่งที่มา

5

หากคุณต้องการทำผ่านsetAttributeคุณจะเปลี่ยนstyleแอตทริบิวต์ดังนี้:

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

สิ่งนี้จะเป็นประโยชน์หากคุณต้องการรีเซ็ตสไตล์อินไลน์อื่น ๆ ทั้งหมดและตั้งค่าคุณสมบัติสไตล์ที่คุณต้องการอีกครั้ง แต่ในกรณีส่วนใหญ่คุณอาจไม่ต้องการเช่นนั้น นั่นเป็นเหตุผลที่ทุกคนแนะนำให้ใช้สิ่งนี้:

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

ข้างต้นเทียบเท่ากับ

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

— thednp
แหล่งที่มา

2

ในการทำให้วัตถุ 3 มิติของคุณเคลื่อนไหวให้ใช้รหัส:

<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
แหล่งที่มา