परिवर्तन - सीएसएस-ट्रिक्स

Anonim

transformसंपत्ति आप नेत्रहीन, को बढ़ा घूर्णन, अनुवाद करना, या स्केलिंग द्वारा एक तत्व में हेरफेर करने की अनुमति देता है:

.element ( width: 20px; height: 20px; transform: scale(20); )

घोषित ऊँचाई और चौड़ाई के साथ भी, यह तत्व अब अपने मूल आकार से बीस गुना तक बढ़ जाएगा:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन ट्रांसफॉर्म स्पष्टीकरण देखें।

इस फ़ंक्शन को दो मान देने से यह क्षैतिज रूप से पहले और दूसरे द्वारा लंबवत रूप से फैल जाएगा। तत्व के नीचे के उदाहरण में अब चौड़ाई की दोगुनी होगी लेकिन मूल तत्व की आधी ऊंचाई:

.element ( transform: scale(2, .5); )

या आप शॉर्टहैंड फ़ंक्शन का उपयोग किए बिना अधिक विशिष्ट हो सकते हैं:

transform: scaleX(2); transform: scaleY(.5);

लेकिन scale()उपलब्ध कई परिवर्तन कार्यों में से एक है:

मूल्यों

  • scale(): तत्व के आकार को प्रभावित करता है। यह भी लागू होता है font-size, padding, height, और width, भी के एक तत्व। यह भी कार्यों scaleXऔर scaleYकार्यों के लिए एक आशुलिपि समारोह है।
  • skewX()और skewY(): एक तत्व को बाईं या दाईं ओर झुकता है, जैसे आयत को समांतर चतुर्भुज में बदलना। skew()एक आशुलिपि है जो दोनों मूल्यों को जोड़ती skewX()और जोड़ती है skewY।
  • translate(): एक तत्व को बग़ल में या ऊपर और नीचे ले जाता है।
  • rotate(): तत्व को अपनी वर्तमान स्थिति से दक्षिणावर्त घुमाता है।
  • matrix(): एक फ़ंक्शन जो संभवतः हाथ से लिखे जाने का इरादा नहीं है, लेकिन सभी परिवर्तनों को एक में जोड़ता है।
  • perspective(): स्वयं तत्व को प्रभावित नहीं करता है, लेकिन पतले तत्वों के 3 डी परिवर्तनों को प्रभावित करता है, जिससे उन सभी को एक सुसंगत गहराई का दृष्टिकोण मिल सकता है।

तिरछा

/* Skew points along the x-axis */ .element ( transform: skewX(25deg); ) /* Skew point along the y-axis */ .element ( transform: skewY(25deg); ) /* Skew points along the x- and y-axis */ .element ( transform: skew(25deg, 25deg); )

skewXऔर skewYएक तत्व एक ही रास्ता या अन्य झुकाव कार्यों को बदलने। याद रखें: एक तत्व को तिरछा करने के लिए कोई आशुलिपि संपत्ति नहीं है, इसलिए आपको दोनों कार्यों का उपयोग करने की आवश्यकता होगी। नीचे दिए गए उदाहरण में, हम बाईं ओर दाईं ओर 100px x 100px वर्ग तिरछा कर सकते हैं skewX:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन ट्रांसफॉर्म स्पष्टीकरण देखें।

इस उदाहरण में जब हम एक तत्व को तिरछा तिरछा कर सकते हैं skewY:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन ट्रांसफॉर्म स्पष्टीकरण देखें।

अब दो का skew()संयोजन करने के लिए उपयोग करते हैं:

CodePen पर
CSS-Tricks (@ css-tricks) द्वारा पेन स्क्यू () शॉर्टहैंड प्रॉपर्टी
देखें।

घुमाएँ

.element ( transform: rotate(25deg); )

यह एक तत्व को अपनी मूल स्थिति से दक्षिणावर्त घुमाता है, जबकि एक नकारात्मक मान इसे विपरीत दिशा में घुमाएगा। यहां एक सरल एनिमेटेड उदाहरण है जहां एक वर्ग हर तीन सेकंड में 360 डिग्री घूमता रहता है:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन ट्रांसफॉर्म स्पष्टीकरण देखें।

हम भी rotateX, rotateYऔर rotateZकार्यों का उपयोग कर सकते हैं , जैसे:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन ट्रांसफॉर्म स्पष्टीकरण देखें।

अनुवाद करना

.element ( transform: translate(20px, 10px); )

यह ट्रांसफ़ेक्शन फ़ंक्शन एक तत्व बग़ल में, या ऊपर और नीचे ले जाता है। सिर्फ ऊपर / बाएं / नीचे / दाएं का उपयोग क्यों न करें? खैर, यह थोड़ा भ्रमित करने वाला है। मैं उन लोगों को लेआउट / स्थिति के रूप में सोचता हूं (उनके पास वैसे भी बेहतर ब्राउज़र समर्थन है) और यह उन चीजों को स्थानांतरित करने या एनीमेशन के हिस्से के रूप में चारों ओर ले जाने का एक तरीका है।

इन मानों की लंबाई कोई भी होगी, जैसे 10px या 2.4em। एक मान तत्व को दाईं ओर ले जाएगा (बाईं ओर नकारात्मक मान)। यदि दूसरा मान प्रदान किया जाता है, तो वह दूसरा मान इसे नीचे ले जाएगा (नकारात्मक मान ऊपर)। या, आप विशिष्ट प्राप्त कर सकते हैं:

transform: translateX(value); transform: translateY(value);

यह ध्यान रखना महत्वपूर्ण है कि एक तत्व का उपयोग transformकरने से अन्य तत्व इसके चारों ओर प्रवाह नहीं करेंगे। translateनीचे दिए गए फ़ंक्शन का उपयोग करके और हरे रंग के वर्ग को उसकी मूल स्थिति से बाहर निकालने के लिए, हम देखेंगे कि आस-पास का पाठ कैसे तय किया जाएगा, जैसे कि वर्ग एक ब्लॉक तत्व है:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन ट्रांसफॉर्म स्पष्टीकरण देखें।

यह भी ध्यान देने योग्य है कि translateयदि आप उस संपत्ति को चेतन करना चाहते हैं, तो इसके विपरीत हार्डवेयर त्वरित हो जाएगा position: absolute।

एकाधिक मूल्य

स्थान-पृथक सूची के साथ आप transformसंपत्ति में कई मान जोड़ सकते हैं:

.element ( width: 20px; height: 20px; transform: scale(20) skew(-20deg); )

यह ध्यान देने योग्य है कि एक ऐसा क्रम है जिसमें इन परिवर्तनों को किया जाएगा, उदाहरण में `तिरछा` पहले प्रदर्शन किया जाएगा और फिर तत्व को स्केल किया जाएगा।

आव्यूह

सभी matrixफ़ंक्शन को एक में बदलने के लिए ट्रांसफ़ॉर्म फ़ंक्शन का उपयोग किया जा सकता है। यह शॉर्टहैंड को बदलने जैसा है, केवल मुझे विश्वास नहीं है कि यह वास्तव में हाथ से लिखे जाने का इरादा है। मैट्रिक्स रिज़ॉल्यूशन जैसे उपकरण वहाँ हैं, जो एकल मैट्रिक्स घोषणा में रूपांतरित समूह को परिवर्तित कर सकते हैं। शायद कुछ स्थितियों में यह फ़ाइल आकार को कम कर सकता है, हालांकि लेखक-अमित्र सूक्ष्म अनुकूलन जैसे कि आपके समय के लायक नहीं हैं।

जिज्ञासु के लिए, यह:

rotate(45deg) translate(24px, 25px)

के रूप में भी प्रतिनिधित्व किया जा सकता है:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

3 डी रूपांतरण

उपरोक्त गुणों में से अधिकांश में 3 डी संस्करण हैं।

translate3d(x, y, z) translateZ(z)

तीसरा मान translate3dया translateZमान, दर्शक को तत्व की ओर ले जाता है, नकारात्मक मान दूर करता है।

scale3d(sx, sy, sz) scaleZ(sz)

में तीसरा मान scale3dया मान scaleZz- अक्ष के साथ स्केलिंग को प्रभावित करता है (उदाहरण के लिए स्क्रीन से निकलने वाली काल्पनिक रेखा)।

rotateX(value) rotateY(value) rotate3d(x, y, z)

rotateXऔर rotateYउन एक्सिस के चारों ओर 3 डी अंतरिक्ष में एक तत्व को घुमाएगा। rotate3dआपको 3D स्थान में एक बिंदु निर्दिष्ट करने की अनुमति देता है जिसमें तत्व को चारों ओर घुमाने के लिए।

matrix3d(… )

4 × 4 ग्रिड में 3 डी परिवर्तन का प्रोग्राम करने का तरीका। कोई भी कभी भी इनमें से किसी एक को भी लिखेगा।

perspective(value)

यह मान तत्व को स्वयं प्रभावित नहीं करता है, लेकिन यह अवरोही तत्वों के 3D परिवर्तनों को प्रभावित करता है, जिससे सभी को एक सुसंगत गहन परिप्रेक्ष्य मिलता है।

अधिक जानकारी

  • रूपांतरण और उपयोग पर एमडीएन डॉक्स।
  • 3 डी ट्रांसफॉर्म पर डेविड डेसेंड्रो का प्रलेखन
  • सर्फिन सफारी: 3 डी ट्रांसफ़ॉर्म
  • CSS3 के रूपांतरणों पर W3C की कल्पना
  • CSS 3D ट्रांसफॉर्म में परिचय

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

2 डी रूपांतरण

क्रोम सफारी फ़ायर्फ़ॉक्स ओपेरा अर्थात एंड्रॉयड आईओएस
कोई 3.1+ 3.5+ है 10.5+ है 9+ 4.1+ कम से कम ४

3 डी रूपांतरण

क्रोम सफारी फ़ायर्फ़ॉक्स ओपेरा अर्थात एंड्रॉयड आईओएस
10+ 4+ 12+ कोई नहीं 10+ 4.1+ 5+

वेंडर उपसर्ग

.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )