خصائص التحويل الفردية

تتيح لك السمة transform تطبيق عمليات تحويل متعددة بترتيب محدّد، ولكن أي تغييرات على عملية تحويل واحدة تتطلب إعادة تحديد سلسلة التحويل بالكامل. وهذا يجعل من الصعب تحريك أو نقل تحويل واحد.

تتيح لك خصائص تحويل CSS الفردية (translate وrotate وscale) تطبيق عمليات التحويل بشكل مستقل عن السمة transform. يسهّل هذا النهج إلغاء عملية تحويل واحدة، على سبيل المثال في :hover.

تفاصيل التنفيذ الرئيسية

يتم دائمًا تطبيق خصائص التحويل الفردية بترتيب ثابت، بغض النظر عن ترتيبها في CSS:

1. translate
2. rotate
3. scale
4. ‫transform (تم تطبيقه أخيرًا)

إذا كنت بحاجة إلى ترتيب مختلف (على سبيل المثال، تغيير الحجم قبل التدوير)، عليك مواصلة استخدام دوال السمة transform.

لا تلغي دوال التحويل خصائص التحويل الفردية. بعبارة أخرى، سيتم أولاً تكبير حجم scale: 2; transform: scale(3); بمقدار الضعف، ثم بمقدار 3 أضعاف، ليصبح إجمالي التكبير 6 أضعاف.

منع التغييرات غير المتوقّعة في سياقات التكديس والكتل التي تحتوي على عناصر

تؤثر السمة transform وسمات التحويل الفردية في تنسيق الصفحة وعرضها، وقد تؤدي إلى سلوك غير متوقّع في ما يتعلّق بمؤشر z أو تحديد موضع الارتساء. MANDATORY: If an element may have a transform applied as part of a state change like :hover, or a transition or animation, apply an identity transformation to the base element. يضمن ذلك عدم تغيير سياق التكديس والاحتواء للعنصر عند تطبيق عملية تحويل.

.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;
  }
}