خصوصیت‌های تبدیل تکی

ویژگی transform به شما امکان می‌دهد چندین تبدیل را به ترتیب مشخصی اعمال کنید، اما هرگونه تغییر در یک تبدیل مستلزم مشخص کردن مجدد کل زنجیره تبدیل است. این امر پویانمایی یا انتقال یک تبدیل را دشوار می‌کند.

ویژگی‌های تبدیل CSS تکی (translate، rotate، و scale) به شما امکان می‌دهند تبدیل‌ها را مستقل از ویژگی transform اعمال کنید. این رویکرد لغو کردن یک تبدیل را ساده‌تر می‌کند، مثلاً در :hover.

جزئیات کلیدی پیاده‌سازی

ویژگی‌های تبدیل فردی همیشه با ترتیب ثابت اعمال می‌شوند، صرف‌نظر از ترتیب آن‌ها در CSS شما:

1. translate
2. rotate
3. scale
4. transform (آخرین مورد اعمال‌شده)

اگر به ترتیب دیگری نیاز دارید (مثلاً مقیاس‌بندی قبل‌از چرخش)، باید همچنان از توابع ویژگی transform استفاده کنید.

توابع تبدیل، ویژگی‌های تبدیل تکی را لغو نمی‌کنند. به‌عبارت دیگر، scale: 2; transform: scale(3); ابتدا ۲ برابر و سپس ۳ برابر افزایش می‌یابد که درمجموع ۶ برابر می‌شود.

جلوگیری از تغییرات غیرمنتظره در زمینه‌های پشته‌سازی و بلوک‌های حاوی

ویژگی transform و ویژگی‌های تبدیل مستقل بر چیدمان و رندر صفحه تأثیر می‌گذارند و ممکن است باعث رفتار غیرمنتظره با شاخص z یا موقعیت‌یابی لنگر شوند. الزامی: اگر ممکن است عنصری به‌عنوان بخشی از تغییر وضعیت مانند :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;
  }
}