تحكم أكثر دقة في عمليات تحويل CSS مع خصائص التحويل الفردية

تحويل العناصر باستخدام السمات translate وrotate وscale

Bramus

L. David Baron

سمة "transform" في CSS

لتطبيق عمليات التحويل على عنصر، استخدِم سمة transform في CSS. يقبل الموقع <transform-function> واحدًا أو أكثر يتم تطبيقه الواحد تلو الآخر.

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

يتم نقل العنصر المستهدَف بنسبة %50 على محور X، ويتم تدويره بمقدار 30 درجة، ثم توسيعه بنسبة %120.

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

لتغيير المقياس عند التمرير بمؤشر الماوس، عليك تكرار جميع الدوالّ في سمة التحويل، حتى لو بقيت قيمها بدون تغيير.

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

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

إنّ الخصائص الفردية لعمليات التحويل في CSS هي الخصائص التي يتم إرسالها مع الإصدار 104 من Chrome. هذه السمات هي scale وrotate وtranslate، ويمكنك استخدامها لتحديد تلك الأجزاء من التحويل بشكل فردي.

ومن خلال إجراء ذلك، ينضم Chrome إلى متصفّحَي Firefox وSafari اللذَين يتيحان استخدام هذه السمات.

عند إعادة كتابة مثال transform السابق باستخدام السمات الفردية، يصبح المقتطف على النحو التالي:

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

مسائل الطلب

إنّ أحد الاختلافات الرئيسية بين سمة CSS الأصلية 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;
}

في كلتا الحالتين، ستتم ترجمة العناصر المستهدفة أولاً بواسطة 50% على المحور "س"، ثم سيتم تدويرها بواسطة 30deg، وفي النهاية يتم تحجيمها باستخدام 1.2.

إذا تمّ الإعلان عن إحدى سمات التحويل الفردية مع سمة transform، يتمّ تطبيق عمليات التحويل الفردية أولاً (translate وrotate ثمّ scale) مع transform في النهاية (داخل). تنص المواصفة التي تحدّد كيفية حساب مصفوفة التحويل على مزيد من التفاصيل.

الصور المتحركة

السبب الرئيسي لإضافة هذه الخصائص هو تسهيل الصور المتحركة. لنفترض أنّك تريد إضافة حركة إلى عنصر على النحو التالي:

جارٍ استخدام transform

لتنفيذ هذا المؤثر المتحرك باستخدام transform، عليك احتساب جميع القيم البينية لجميع عمليات التحويل المحدّدة، وتضمين هذه القيم في كل إطار رئيسي. على سبيل المثال، لإجراء عملية دوران عند علامة %10، يجب احتساب قيم عمليات التحويل الأخرى أيضًا، لأنّ السمة transform تحتاج إلى جميعها.

يصبح رمز CSS الناتج على النحو التالي:

@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 من خلال استخدامه على الحد الأدنى من العناصر المطلوبة، ولأقصر فترة ممكنة. ولكن من الجيد أيضًا أن تكون محددًا قدر الإمكان. على سبيل المثال، إذا كنت تستخدم السمة will-change لتحسين صورة متحركة باستخدام السمتَين rotate وfilter، يجب تعريف ذلك باستخدام will-change: rotate, filter. وهذا أفضل قليلاً من استخدام will-change: transform, filter في حال إنشاء رسوم متحركة rotate وfilter، لأنّ بعض بنى البيانات التي ينشئها Chrome مسبقًا عند استخدام will-change تختلف في transform عن rotate.

جزء من سلسلة التفاعل التفاعلي الجديد