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

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

Bramus

L. David Baron

سمة transform في خدمة مقارنة الأسعار (CSS)

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

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

وتتم ترجمة العنصر المستهدف بنسبة 50% على المحور السيني، وتدويره بمقدار 30 درجة، وأخيرًا تحجيمه بما يصل إلى 120%.

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

لتغيير المقياس عند التمرير، يجب إنشاء نسخة طبق الأصل من جميع الدوال في خاصية التحويل، على الرغم من عدم تغيير قيمها.

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

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

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

وبذلك، ينضم Chrome إلى كلٍّ من Firefox وSafari اللذَين يستخدمان هاتين الميزتَين.

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

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

ترتيب المسائل القانونية

إنّ أحد الاختلافات الرئيسية بين سمة transform الأصلية في خدمة مقارنة الأسعار (CSS) والسمات الجديدة هو ترتيب تطبيق عمليات التحويل المعلَن عنها.

باستخدام 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.

جزء من سلسلة الألعاب القابلة للتشغيل التفاعلي مؤخرًا