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

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

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

लागू करने से जुड़ी अहम जानकारी

अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी हमेशा तय किए गए क्रम में लागू होती हैं. भले ही, आपकी सीएसएस में उनका क्रम कुछ भी हो:

1. translate
2. rotate
3. scale
4. transform (पिछली बार लागू किया गया)

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

ट्रांसफ़ॉर्म फ़ंक्शन, अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी को ओवरराइड नहीं करते. दूसरे शब्दों में, scale: 2; transform: scale(3); को पहले दो गुना और फिर तीन गुना बढ़ाया जाएगा. इस तरह, कुल छह गुना बढ़ाया जाएगा.

स्टैकिंग कॉन्टेक्स्ट और कंटेनिंग ब्लॉक में अचानक होने वाले बदलावों को रोकना

transform प्रॉपर्टी और अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी, पेज के लेआउट और रेंडरिंग पर असर डालती हैं. साथ ही, इनकी वजह से z-index या ऐंकर पोज़िशनिंग में अनचाहा व्यवहार हो सकता है. ज़रूरी: अगर किसी एलिमेंट में :hover जैसे स्टेटस में बदलाव या ट्रांज़िशन या ऐनिमेशन के हिस्से के तौर पर ट्रांसफ़ॉर्म लागू किया जा सकता है, तो बेस एलिमेंट में आइडेंटिटी ट्रांसफ़ॉर्मेशन लागू करें. इससे यह पक्का होता है कि ट्रांसफ़ॉर्म लागू होने पर, एलिमेंट का स्टैकिंग कॉन्टेक्स्ट और कंटेनमेंट नहीं बदलता.

.element{
  /* MANDATORY: Apply identity transformations for properties that will
     change on state changes (like :hover). This prevents unexpected layout
     or z-index shifts caused by creating a new stacking context only on hover. */
  translate: 0px;
  rotate: 0deg;
  scale: 1;
}
.element:hover{
  translate: 10px 10px;
  rotate: 20deg;
  scale: 0.8;
}

इंडिपेंडेंट ऐनिमेशन और ट्रांज़िशन

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

.card {
  /* Define independent animations that don't overwrite each other */
  animation: float 3s infinite ease-in-out;
  
  /* Transition only the scale property for hover states */
  transition: scale 0.3s ease;

  /* Establish the base scale to prevent a sudden stacking context shift when transitioning on hover. */
  scale: 1;
}

.card:hover {
  /* Only the scale changes; the 'float' animation (translate) continues uninterrupted */
  scale: 1.05;
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

फ़ॉलबैक रणनीतियां

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

.element {
  /* Base transform */
  transform: translate(100px, 0) rotate(45deg);
  /* Specify the identity for the scale property. */
  scale: 1;
}

@supports not (translate: 0px) {
  .element:hover {
    /* Fallback: Must repeat translate and rotate even if only scale changes */
    transform: translate(100px, 0) rotate(45deg) scale(1.1);
  }
}

@supports (translate: 0px) {
  .element:hover {
    /* Modern: Only declare the change */
    scale: 1.1;
  }
}