خاصية transform
آخر تحديث: 2026-09-13
transform خاصية transform
تُطبّق الخاصية transform تحويلات هندسية ثنائية أو ثلاثية الأبعاد على عنصر، بما في ذلك النقل والدوران والقياس والإمالة. تحدث التحويلات في مرحلة العرض ولا تؤثر على تخطيط تدفق المستند، ما يجعلها أداة شائعة لتحقيق تأثيرات بصرية عالية الأداء. والـ transform إحدى الخصائص الأساسية في رسوم CSS المتحركة وتصميم التفاعل.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | جميع العناصر |
| نوع الحركة | transform |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
transform: none | <transform-function>+;
/* <transform-function> = translate() | translate3d() | rotate() | rotate3d() | scale() | skew() | matrix() | perspective() etc. */⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | كلمة مفتاحية | لا يُطبَّق أي تحويل |
<transform-list> | النوع | قائمة دوال التحويل: translate و rotate و scale و skew وغيرها |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transform | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： تُفصل دوال التحويل المتعددة في قيمة واحدة بمسافات وتُطبَّق من اليمين إلى اليسار — إذ تُطبَّق الدالة الأبعد يمينًا أولًا — لذا للترتيب أهمية وتغييره قد ينتج نتيجة مختلفة.
تحذير： يُنشئ transform سياق تكديس جديدًا وكتلة احتواء، ما قد يغيّر مرجع التموضع للعناصر الفرعية ذات position: fixed.
❓ الأسئلة الشائعة
Qهل تؤثر خاصية transform في CSS على تخطيط العناصر المحيطة؟
Aلا. يُعد transform تحويلًا بصريًا يُعالَج أثناء التركيب: يظل العنصر يشغل مساحته وحجمه الأصليين في تدفق المستند، فلا تتأثر العناصر المحيطة ولا يُطلَق أي إعادة تدفق. ولهذا تمامًا تكون رسوم transform المتحركة أفضل أداءً بكثير من تحريك left أو top. ولاحظ أن العنصر المحوَّل يصبح كتلة احتواء لأي عناصر فرعية ذات position: fixed.
Qما الفرق بين التحويل ثنائي الأبعاد وثلاثي الأبعاد؟
Aتعمل التحويلات ثنائية الأبعاد في مستوى X/Y — مثل translate() و rotate() و scale() و skew(). أما التحويلات ثلاثية الأبعاد فتضيف المحور Z بدوال مثل translateZ و rotateX و rotateY. ولرؤية عمق حقيقي، تحتاج عادةً إلى perspective على العنصر الأصل، غالبًا مقترنة بـ transform-style: preserve-3d لكي تحافظ العناصر الفرعية على مواضعها ثلاثية الأبعاد.
Qلماذا تكون رسوم transform سريعة؟ هل تستخدم تسريع GPU؟
Aلا يُطلق تحريك transform أي تخطيط أو إعادة رسم. يرفع المتصفح العنصر إلى طبقة تركيب خاصة به، يتولّاها معالج الرسوم GPU، فيبقى الحركة سلسة حتى أثناء تمرير الصفحة أو تداخلها مع عناصر أخرى. ومقارنة بـ left/top اللذين يفرضان إعادة تدفق في كل إطار، يُعد transform الطريقة المفضّلة للوصول إلى حركة بسرعة 60fps، وإضافة will-change تجعل النتيجة أكثر استقرارًا.
Qبأي ترتيب تُطبَّق دوال transform؟ هل يؤثر أن تكتب translate قبل rotate؟
Aتُطبَّق الدوال من اليمين إلى اليسار: الدالة الأبعد يمينًا تُطبَّق أولًا. فعلى سبيل المثال، يدور التعبير transform: translate(20px) rotate(45deg) أولًا ثم ينقل في الاتجاه المُدوَّر، بينما يُترجم التعبير transform: rotate(45deg) translate(20px) أولًا ثم يدور — وتختلف النتائج النهائية تمامًا.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
