जावास्क्रिप्ट का उपयोग कर गतिशील रूप से शैली -webkit-transform कैसे सेट करें?

Question

मैं जावास्क्रिप्ट गतिशील रूप से जावास्क्रिप्ट का उपयोग कर -webkit-transform: rotate() संपत्ति को बदलना चाहता हूं। लेकिन आमतौर पर इस्तेमाल किया setAttribute काम नहीं कर रहा:

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

.style काम नहीं कर रहा है या तो ...

मैं कैसे जावास्क्रिप्ट में इस गतिशील रूप से सेट कर सकते हैं? मुझे पता है कि आप में से कुछ को पहले इससे निपटने का अनुभव है।

Answer 1

JavaScript का उपयोग कर शैली नाम WebkitTransformOrigin और WebkitTransform

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

वेबकिट here के लिए डोम विस्तार संदर्भ की जाँच कर रहे हैं की कोशिश करो।

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

और इस तरह का उपयोग कर jQuery:

webkitProperty 
MozProperty 
msProperty 
OProperty 
property 

मैं इनलाइन को बदलने रीसेट की तरह शैलियों:

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

ब्लॉग देखें

Answer 2

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

Answer 3

अधिकतर सामान्य विक्रेताओं के लिए जावास्क्रिप्ट अंकन कर रहे हैं पोस्ट Coding Vendor Prefixes with JavaScript (2012-03- 21)।

Answer 4

तुम इतनी तरह style विशेषता बदल जाएगा आप setAttribute के माध्यम से यह करने के लिए करना चाहते हैं:

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)'; 

Answer 5

के बराबर है अपने 3D वस्तु चेतन करने के लिए, कोड का उपयोग करें::

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