ऑफसेट-घुमाएँ - सीएसएस-ट्रिक्स

Anonim

इस संपत्ति के रूप में जीवन शुरू हुआ motion-rotation, फिर यह बन गया offset-rotation, अब यह है offset-rotate। यह अभी भी एक कार्यशील ड्राफ्ट प्रायोगिक संपत्ति है। यदि आप इसका उपयोग करने जा रहे हैं, तो आप जो भी सबसे हाल की चीज है उसका उपयोग कर सकते हैं।

offset-rotateसीएसएस में संपत्ति अपने पर निर्भर करता है एक तत्व के कोण को नियंत्रित करता है offset-distanceएक साथ offset-path।

एक पथ के साथ एनिमेटेड होने वाले तत्व की कल्पना करें एक छोटी दौड़ कार है। जैसे-जैसे रेस कार रास्ते में आगे बढ़ती है, उसे वास्तव में घूमने की जरूरत होती है ताकि कार का अगला भाग जिस दिशा में जा रहा है उसका सामना करना पड़ रहा है, अन्यथा, यह अजीब और अप्राकृतिक लगेगा। शुक्र है, के लिए डिफ़ॉल्ट मान offset-pathहै autoजो बिल्कुल यही करता है।

देखें यह डेमो:


CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा गति-पथ पर पेन पैमाने पर कार देखें
।

संभावित मान

.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* fixed angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )

ब्राउज़र का समर्थन

offset-*गुण अभी भी इस लेखन के समय एक प्रायोगिक सुविधा माना जाता है। यदि ब्राउज़र समर्थन की वर्तमान कमी आपको किसी प्रोजेक्ट पर इसका उपयोग करने में संकोच करती है, तो आप इस स्तर के एनीमेशन के लिए GSAP का उपयोग करने पर विचार कर सकते हैं। यह आपको वर्तमान में सबसे व्यापक ब्राउज़र समर्थन प्रदान करेगा।

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
४६ .२ नहीं न । ९ नहीं न

मोबाइल / टेबलेट

Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी
88 .५ 81 नहीं न

Chrome 46 और ओपेरा 33 (और संबंधित मोबाइल संस्करण) के रूप में, हमारे पास ब्लिंक (कोई ध्वज नहीं) में "प्रारंभिक समर्थन" है।

अतिरिक्त जानकारी

  • युक्ति: मोशन पाथ मॉड्यूल स्तर 1 कल्पना
  • CodePen पर उदाहरणों का संग्रह
  • भविष्य का उपयोग: डैन विल्सन द्वारा सीएसएस मोशन पथ
  • वेबिट टिकट # 139128
  • मोज़िला टिकट # 1186329
  • Microsoft एज सुविधा अनुरोध
  • क्रोम प्लेटफ़ॉर्म स्थिति: सीएसएस मोशन पाथ और नमूना
  • MDN: ऑफसेट (अन्य संबंधित गुणों के लिंक)