सीएसएस 3 विकल्प?

Question

मैं एक जेएस स्क्रिप्ट को कन्वर्ट करने की कोशिश कर रहा हूं जो आईपैड जैसे स्पर्श सक्षम उपकरणों के लिए बनाया गया था ताकि इसका उपयोग माउस जेस्चर के साथ किया जा सके।

स्क्रिप्ट अनुवाद 3 डी का उपयोग करता है, जो (मुझे लगता है) वेबकिट विशिष्ट है, लेकिन मैं यह काम जितना कर सकता हूं उतने ब्राउज़र में बनाना चाहता हूं। तो, 3 डी अनुवाद करने के लिए CSS3 विकल्प क्या है?

यहाँ कैसे यह जावास्क्रिप्ट में इस्तेमाल किया जा रहा है:

element.style.webkitTransform = 'translate3d(500px, 0, 0)'; 

CSS3 का मेरा ज्ञान बहुत सीमित है, इसलिए किसी भी उदाहरण/स्पष्टीकरण आप दे सकते हैं बहुत सराहना कर रहे हैं।

Answer 1

अनुवाद 3 डी CSS3 है, अधिकांश ब्राउज़रों ने अभी तक इसे लागू नहीं किया है (क्रोम/सफारी वेबकिट के माध्यम से इसका समर्थन करने वाले एकमात्र प्रमुख हैं)। यह एक 3-डी परिवर्तन शैली है।

भी 2-डी परिवर्तनों जो बाहर Z- अक्ष में कटौती कर रहे हैं, तो:

translate3d(X,Y,Z); // or translateX(X), translateY(Y), translateZ(Z); 

translate(X,Y); 

शुक्र है, 2-डी रूपांतरण ज्यादातर सभी प्रमुख ब्राउज़रों (द्वारा समर्थित हैं हो जाता है आईई 9 और ऊपर) लेकिन उन्हें ब्राउज़र उपसर्ग की आवश्यकता है। अपने उदाहरण में, यह विचार करेंगे की तरह:

/* CSS */  
selector { 
    transform: translate(500px, 0); 
    -o-transform: translate(500px, 0);   /* Opera */ 
    -ms-transform: translate(500px, 0);  /* IE 9 */ 
    -moz-transform: translate(500px, 0);  /* Firefox */ 
    -webkit-transform: translate(500px, 0); /* Safari and Chrome */ 
} 

/* JS */ 
element.style.transform = 'translate(500px, 0)'; 
element.style.OTransform = 'translate(500px, 0)';   // Opera 
element.style.msTransform = 'translate(500px, 0)';   // IE 9 
element.style.MozTransform = 'translate(500px, 0)';  // Firefox 
element.style.WebkitTransform = 'translate(500px, 0)';  // Safari and Chrome 

के बारे में अधिक 2 डी और 3 डी देखने बदल देती है थोड़ा के लिए:
http://www.w3.org/TR/css3-2d-transforms/
http://www.w3.org/TR/css3-3d-transforms/

2-डी के लिए एक नकारात्मक पक्ष यह बदल देती है कि, 3-डी ट्रांसफॉर्म के विपरीत, वे GPU त्वरित नहीं हैं। इस लिंक को कुछ महान जानकारी के लिए देखें कि कितना हार्डवेयर त्वरण संक्रमण और एनिमेशन में मदद करता है: http://ariya.blogspot.com/2011/07/fluid-animation-with-accelerated.html।

अधिक क्रॉस-ब्राउज़र अच्छाई के लिए, आप एक समारोह लिखने सही ब्राउज़र शैली को बदलने लागू करने के लिए खोजने के लिए कर सकते हैं (या ब्राउज़र रूपांतरण का समर्थन नहीं करता निर्धारित) तो जैसे:

var getTransformProperty = function(node) { 
    var properties = [ 
     'transform', 
     'WebkitTransform', 
     'msTransform', 
     'MozTransform', 
     'OTransform' 
    ]; 
    var p; 
    while (p = properties.shift()) { 
     if (typeof node.style[p] != 'undefined') { 
      return p; 
     } 
    } 
    return false; 
}; 

तुम भी एक का उपयोग कर सकते फीचर-डिटेक्शन लाइब्रेरी Modernizr।

Answer 2

2d transforms विक्रेता उपसर्ग के साथ widely supported अधिक प्रतीत होता है। यहां W3C spec है।

element.style.webkitTransform = 'translate(500px)'; 

आप Modernizr to check for support का उपयोग कर सकते हैं।