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

Question

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

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

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

मैं इसे गतिशील रूप से जावास्क्रिप्ट में कैसे सेट कर सकता हूं?

Comments

अभ्यस्त आप केवल एक के बजाय शैली विशेषता सेट करते हैं

— मुहम्मद उमर

Answer 1

जावास्क्रिप्ट शैली के नाम हैं WebkitTransformOriginऔरWebkitTransform

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

यहां WebKit के लिए DOM एक्सटेंशन संदर्भ देखें ।

Comments

यदि आप अधिक चाहते हैं, तो एक, उदाहरण के लिए एक स्थान के साथ अलग करें: element.style.webkitTransform = "rotate(-2deg) translateX(100px)";

— मार्क

यह सफारी और क्रोम पर ठीक काम करता है, लेकिन फ़ायरफ़ॉक्स पर काम नहीं करेगा। फ़ायरफ़ॉक्स के लिए यह करने के बराबर तरीका क्या है?

— रिकार्डो सांचेज़-साज़

MozTransform आपका मित्र होना चाहिए।

— हगंम

@Olafur Apple लिंक मर चुका है।

— २२

तो एक स्ट्रिंग के साथ ऐसा करने का एकमात्र तरीका है। अगर यह पुनरावर्ती होता तो यह बहुत धीमा लगता।

— बीबीसिंगर

Answer 2

यहां अधिकांश सामान्य विक्रेताओं के लिए जावास्क्रिप्ट नोटेशन हैं:

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":""
});

जावास्क्रिप्ट के साथ ब्लॉग पोस्ट कोडिंग विक्रेता उपसर्ग देखें (2012-03-21)।

Comments

jQuery स्वचालित रूप से सही उपसर्ग चुनता है, केवल लिखना होता है transform।

— Blaise

@ बाइसाइज़ जो नया है। किस संस्करण से शुरू?

— आर्मेल लार्सर

यह jQuery 1.8.0 के बाद से करता है। गितुब पर प्रतिबद्ध

— ब्लेसेज़

win.style.transform ="translate(-50%)"काम नहीं कर रहा

— मोमिन

Answer 3

प्रयोग करके देखें

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

Answer 4

यदि आप इसे अपने माध्यम से 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)';

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>