التحوّلات

الخاصية transform تحرّك العنصر وتكبّره وتدوّره دون أن تمسّ ترتيب الصفحة، فلا تتحرّك العناصر من حوله، وينفّذها المتصفح على معالج الرسوميات (GPU).

ومن هنا جاءت قاعدة الأداء المعروفة: لا تحرّك إلا transform وopacity، لأن تحريك width أو top يجبر المتصفح على إعادة حساب مواضع العناصر في كل إطار، فتتقطّع الحركة.

ويمكنك أن تجمع عدة تحوّلات في سطر واحد، وترتيبها مهمّ: translate ثم rotate ثم scale.