सीएसएस पर बेहतर कंट्रोल, अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी के साथ बदल जाता है

translate, rotate, और scale प्रॉपर्टी की मदद से एलिमेंट बदलना

Bramus

L. David Baron

सीएसएस transform प्रॉपर्टी

किसी एलिमेंट पर ट्रांसफ़ॉर्म लागू करने के लिए, सीएसएस transform प्रॉपर्टी का इस्तेमाल करें. प्रॉपर्टी में एक या उससे ज़्यादा <transform-function> शामिल किए जा सकते हैं. ये एक के बाद एक लागू होते हैं.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

टारगेट किए गए एलिमेंट को X-ऐक्सिस पर 50% तक ट्रांसलेट किया गया है, 30 डिग्री तक घुमाया गया है, और आखिर में 120% तक स्केल किया गया है.

transform प्रॉपर्टी अपने काम को ठीक से करती है. हालांकि, उनमें से किसी भी वैल्यू में अलग से बदलाव करने पर, थोड़ी परेशानी होती है.

कर्सर घुमाने पर स्केल बदलने के लिए, आपको ट्रांसफ़ॉर्म प्रॉपर्टी में सभी फ़ंक्शन को डुप्लीकेट करना होगा. भले ही, उनकी वैल्यू में कोई बदलाव न किया गया हो.

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी

Chrome 104 में शिपिंग, सीएसएस ट्रांसफ़ॉर्म के लिए अलग-अलग प्रॉपर्टी हैं. ये प्रॉपर्टी scale, rotate, और translate हैं. इनका इस्तेमाल, ट्रांसफ़ॉर्मेशन के उन हिस्सों को अलग-अलग तय करने के लिए किया जा सकता है.

ऐसा करने पर, Chrome उन ब्राउज़र की सूची में शामिल हो जाता है जो पहले से ही इन प्रॉपर्टी के साथ काम करते हैं. जैसे, Firefox और Safari.

अलग-अलग प्रॉपर्टी के साथ, पिछले transform उदाहरण को फिर से लिखने पर, आपका स्निपेट इस तरह दिखता है:

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

ऑर्डर से जुड़े मामले

ओरिजनल सीएसएस transform प्रॉपर्टी और नई प्रॉपर्टी के बीच एक मुख्य अंतर यह है कि एलान किए गए ट्रांसफ़ॉर्मेशन किस क्रम में लागू होते हैं.

transform का इस्तेमाल करने पर, ट्रांसफ़ॉर्मेशन फ़ंक्शन उसी क्रम में लागू होते हैं जिस क्रम में उन्हें लिखा गया है. जैसे, बाईं ओर (बाहर) से दाईं ओर (अंदर).

अलग-अलग ट्रांसफ़ॉर्मेशन प्रॉपर्टी के लिए, क्रम वही नहीं होता है जिसमें उन्हें एलान किया जाता है. क्रम हमेशा एक जैसा होता है: पहले translate (बाहर), फिर rotate, और फिर scale (अंदर).

इसका मतलब है कि यहां दिए गए दोनों कोड स्निपेट एक ही नतीजा देते हैं:

.transform--individual {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.transform--individual-alt {
  rotate: 30deg;
  translate: 50% 0;
  scale: 1.2;
}

दोनों ही मामलों में, टारगेट किए गए एलिमेंट को पहले X-ऐक्सिस पर 50% से ट्रांसलेट किया जाएगा. इसके बाद, 30deg से घुमाया जाएगा और आखिर में 1.2 से स्केल किया जाएगा.

अगर किसी transform प्रॉपर्टी के साथ अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी का एलान किया जाता है, तो अलग-अलग ट्रांसफ़ॉर्म पहले (translate, rotate, और फिर scale) लागू होते हैं. इसके बाद, transform आखिर में (अंदर) लागू होता है. ज़्यादा जानकारी उस स्पेसिफ़िकेशन में दी गई है जिसमें ट्रांसफ़ॉर्मेशन मैट्रिक का हिसाब कैसे लगाया जाना चाहिए, यह बताया गया है.

ऐनिमेशन

इन प्रॉपर्टी को इसलिए जोड़ा गया था, ताकि ऐनिमेशन आसानी से बनाए जा सकें. मान लें कि आपको किसी एलिमेंट को इस तरह ऐनिमेट करना है:

transform का इस्तेमाल करना

transform का इस्तेमाल करके इस ऐनिमेशन को लागू करने के लिए, आपको तय किए गए सभी ट्रांसफ़ॉर्मेशन के बीच की सभी वैल्यू का हिसाब लगाना होगा और उन्हें हर की-फ़्रेम में शामिल करना होगा. उदाहरण के लिए, 10% मार्क पर रोटेशन करने के लिए, अन्य ट्रांसफ़ॉर्मेशन की वैल्यू का भी हिसाब लगाया जाना चाहिए. ऐसा इसलिए, क्योंकि transform प्रॉपर्टी को इन सभी वैल्यू की ज़रूरत होती है.

इससे मिलने वाला सीएसएस कोड यह हो जाता है:

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी का इस्तेमाल करना

अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी की मदद से, इसे लिखना काफ़ी आसान हो जाता है. सभी ट्रांसफ़ॉर्मेशन को एक कीवर्ड से दूसरे कीवर्ड पर खींचने के बजाय, हर ट्रांसफ़ॉर्मेशन को अलग से टारगेट किया जा सकता है. अब आपको बीच की सभी वैल्यू का हिसाब लगाने की ज़रूरत भी नहीं है.

@keyframes anim {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }

  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }

  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी और कई कीफ़्रेम का इस्तेमाल करना

अपने कोड को मॉड्यूलर बनाने के लिए, हर सब-ऐनिमेशन को अलग-अलग कीफ़्रेम के सेट में बांटा जा सकता है.

@keyframes move {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }
}

@keyframes scale {
  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }
}

@keyframes rotate {
  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: move 2s, scale 2s, rotate 2s;
  animation-fill-mode: forwards;
}

इस स्प्लिट की मदद से, अपनी पसंद के मुताबिक हर अलग-अलग सेट को लागू किया जा सकता है. ऐसा इसलिए है, क्योंकि transform प्रॉपर्टी, अब अलग-अलग प्रॉपर्टी बन गई हैं और अब वे एक-दूसरे को ओवरराइट नहीं करती हैं. इसके अलावा, हर ट्रांसफ़ॉर्मेशन के लिए अलग-अलग समय तय किया जा सकता है. इसके लिए, आपको पूरे डेटा को फिर से लिखने की ज़रूरत नहीं है.

परफ़ॉर्मेंस

इन नई प्रॉपर्टी का इस्तेमाल करने वाले ऐनिमेशन, मौजूदा transform प्रॉपर्टी के ऐनिमेशन की तरह ही असरदार होते हैं.

translate, rotate, और scale के ऐनिमेशन, कॉम्पोज़िटर पर उसी तरह चलते हैं जिस तरह transform के ऐनिमेशन चलते हैं. इसलिए, ये transform की तरह ही ऐनिमेशन की परफ़ॉर्मेंस के लिए अच्छे हैं.

ये नई प्रॉपर्टी, will-change प्रॉपर्टी के साथ भी काम करती हैं. आम तौर पर, will-change का ज़रूरत से ज़्यादा इस्तेमाल करने से बचना चाहिए. इसके लिए, इसे कम से कम एलिमेंट पर और जितना हो सके उतने कम समय के लिए इस्तेमाल करें. हालांकि, ज़्यादा से ज़्यादा सटीक जानकारी देना भी अच्छा होता है. उदाहरण के लिए, अगर rotate और filter प्रॉपर्टी की मदद से किसी ऐनिमेशन को ऑप्टिमाइज़ करने के लिए will-change का इस्तेमाल किया जा रहा है, तो आपको will-change: rotate, filter का इस्तेमाल करके इसकी जानकारी देनी चाहिए. rotate और filter को ऐनिमेट करने के मामले में, यह will-change: transform, filter का इस्तेमाल करने से थोड़ा बेहतर है. इसकी वजह यह है कि will-change का इस्तेमाल करने पर, Chrome पहले से कुछ डेटा स्ट्रक्चर बनाता है. ये स्ट्रक्चर, transform और rotate के लिए अलग-अलग होते हैं.

नई इंटरऑपरेबल सीरीज़ का हिस्सा