6XC

منشئ التحويل CSS (transform)

ادمج التدوير والتحجيم والإزاحة والإمالة بصريًا وانسخ كود transform الناتج.

975 مشاهدة

خاصية transform

transform تحرّك العنصر وتدوّره وتحجّمه وتُميله دون التأثير على تدفق المستند، وهي مُسرَّعة بواسطة GPU — لهذا السبب تُعد transform (مع opacity) الخيار المفضل للحركات السلسة. الدوال تُطبَّق من اليمين إلى اليسار، لذا يهم ترتيبها: rotate(45deg) translateX(50px) ليست مثل عكسها.

الأسئلة الشائعة

لماذا يهم ترتيب الدوال؟

كل دالة تُحوّل نظام الإحداثيات للدالة التالية. الإزاحة ثم التدوير: تحرّك العنصر أولًا ثم تدوّره في مكانه. التدوير ثم الإزاحة: يدور المحور أولًا فتصبح الحركة قطرية.

هل يؤثر transform على العناصر المحيطة؟

لا — يحتفظ العنصر بمساحته الأصلية في التخطيط. هذا يجعل تحريكه غير مكلف، لكنه يعني أنه عليك الانتباه للتداخلات.

أدوات مشابهة

منشئ تدرجات CSS صمّم تدرجات CSS خطية ودائرية ومخروطية مع معاينة حية، وانسخ الكود مباشرة. أنشئ منشئ ظل الصندوق CSS صمّم ظل الصندوق (box-shadow) بصريًا — الإزاحات، التمويه، الانتشار، اللون، الشفافية وinset — مع معاينة حية. أنشئ منشئ استدارة الحواف CSS دوّر كل زاوية على حدة أو جميعها معًا، بوحدة px أو %، مع معاينة حية وكود CSS قابل للنسخ. أنشئ منشئ ظل النص CSS صمّم ظل نص (text-shadow) بتحديد الإزاحة والتمويه واللون والشفافية — مع معاينة حية على نص تجريبي. أنشئ