translate, rotate, और scale प्रॉपर्टी की मदद से एलिमेंट को बदलें
सीएसएस 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 के डेटा से अलग होते हैं.
यह नई इंटरऑपरेबल सीरीज़ का हिस्सा है