transform

خاصية التحويل الهندسي transform

خاصية transform تحرّك وتكبّر وتدوّر العنصر دون لمس تخطيط الصفحة — لغة الحركة الأولى بأداء العتاد الرسومي.

أربع عمليات تُدمج بمسافات: translate إزاحة، scale تكبير، rotate دوران، skew إمالة. سرّ مكانتها: تعمل في طور «التركيب» على كرت الشاشة — العنصر يتحرك بصريًا **دون تحريك جيرانه ولا إعادة حساب تخطيط** — لذا هي (مع opacity) الثنائي الذي تُبنى منه كل الحركات المحترمة الأداء.

الكلاسيكيات: hover يرفع البطاقة translateY(-4px)، زر ينكمش عند الضغط scale(0.97)، شيفرون يدور rotate(180deg) عند الفتح (سهم Mega Menu بهذا الموقع!).

الصياغة

.card:hover { transform: translateY(-4px) scale(1.02); }
.chevron.open { transform: rotate(180deg); }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .t { display: inline-grid; place-items: center; width: 86px; height: 60px; background: #7c5cff; color: white; border-radius: 10px; margin: 8px; transition: transform 0.25s ease; cursor: pointer; font-size: 13px; }
  .t1:hover { transform: translateY(-8px); }
  .t2:hover { transform: scale(1.15); }
  .t3:hover { transform: rotate(12deg); }
</style>
<span class="t t1">ارفعني</span><span class="t t2">كبّرني</span><span class="t t3">أدرني</span>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
translate(x, y) / translateY	إزاحة بلا إزعاج الجيران — بديل top/left المتحرك
scale(1.05)	تكبير/تصغير من المركز
rotate(45deg)	دوران — أيقونات وأسهم الحالات
translate(-50%, -50%)	نصف وصفة التوسيط المطلق الكلاسيكية

💡 نصائح عملية

قاعدة الحركة الذهبية: حرّك بـ transform لا بـ top/left/margin — فرق أداء جوهري
نقطة الارتكاز بيدك عبر transform-origin — دوران من الزاوية لا المركز

⚠️ أخطاء شائعة

تحريك الموضع بخصائص التخطيط ثم الشكوى من التقطيع
نسيان أنها تنشئ سياق تراص وحاوية لـ fixed الأبناء — لغزان شهيران

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs