التحويلات (Transforms) في CSS
درس الانتقالات علّمك مدة التغيير. Transform يحدّد أين تذهب البكسلات: انزلاق شارة، دوران أيقونة تحميل، تكبير badge عند hover — غالباً دون دفع الجيران كما يفعل margin أو top.
ماذا يغيّر transform؟
transform يطبّق تحويلاً ثنائي الأبعاد (ولاحقاً ثلاثي) على صندوق الرسم. يبقى العنصر في مكانه في التدفق ما لم تغيّر خصائص التخطيط. لذلك translate() مثالي للحركة الدقيقة: hover، فتح/إغلاق، تصحيحات صغيرة.
خاصية واحدة، دوال متعددة — لا تفصل الدوال بفواصل داخل قيمة transform واحدة؛ سلّسها بمسافات: transform: translateX(1rem) rotate(8deg) scale(1.05);
دوال 2D الأساسية
📊 نظرة على دوال transform ثنائية الأبعاد
| الدالة | مهمة شائعة |
|---|---|
translate(x, y) / translateX / translateY |
نقل بصري دون إعادة تدفق مزعجة |
rotate(زاوية) |
دوران أيقونات وأسهم (deg، turn) |
scale(x, y) / scale(n) |
تكبير/تصغير للتأكيد — بقيم معقولة |
skew(x, y) |
ميل نادر — زوايا صغيرة |
الزوايا بـ deg أو turn. النسب في translate() نسبةً لحجم العنصر نفسه — مفيدة مع أنماط التوسيط التي تعرفها.
translate أولاً — الحركة اليومية
للنقرة البصرية، استخدم translate قبل top أو margin. المتصفح غالباً يرفع الطبقة إلى compositor — ومع transition من الدرس السابق تصبح الحركة أنعم.
.chip {
display: inline-block;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: #e0e7ff;
color: #1e3a8a;
transition: transform 0.2s ease, background-color 0.2s ease;
}
.chip:hover,
.chip:focus-visible {
transform: translateY(-0.15rem);
background: #c7d2fe;
}
الشارة ترتفع بصرياً؛ صندوق السطر في المستند يبقى. جرّب نفس التأثير بـ margin-top سالب — سترى القفز.
rotate و scale معاً
الأيقونات والشارات تجمع غالباً scale صغيراً مع rotate. زوايا ضيقة تحافظ على مظهر احترافي.
.badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.875rem;
transition: transform 0.25s ease;
}
.badge:hover {
transform: scale(1.06);
}
.chevron {
display: inline-block;
transition: transform 0.2s ease;
}
.menu-open .chevron {
transform: rotate(180deg);
}
scale(1.06) تأكيد؛ scale(2) خطأ شائع. rotate(180deg) للسهم يعني «مفتوح» — اربطه بتبديل class في HTML/JS.
transform-origin — محور الحركة
افتراضياً المحور في الوسط. transform-origin ينقله — أسفل-يسار كباب، أعلى-وسط، 50% 100% لتبويب ينحني من القاعدة.
.panel-tilt {
transform-origin: 50% 100%;
transition: transform 0.35s ease;
}
.panel-tilt.is-open {
transform: rotateX(12deg);
}
rotateX هنا تلميح خفيف. المسرح ثلاثي الأبعاد الكامل في جلسة 3D Transforms الاختيارية — الدرس هنا هو origin.
مع transition؛ تجنّب خصائص التخطيط
ضع transition على القاعدة وحرّك transform (وopacity) — لا width/top. احترم prefers-reduced-motion: reduce بإيقاف أو تقصير الدوران/التكبير الزخرفي.
جرّب بنفسك
- ارفع زراً بـ
translateY(-0.2rem)وtransition— ثم جرّبmargin-topولاحظ الجيران. - أدر chevron
180degعند.is-open؛ مدة ~0.2s. transform-origin: left centerعلى بطاقة معrotateصغير — قارن بالوسط.- سلسل
translateX(0.5rem) scale(1.04)فيtransformواحد. - emulate
prefers-reduced-motion: reduceوأزل الحركة غير الضرورية.
أخطاء شائعة
- استخدام
top/marginللرفع بدلtranslate rotate(45deg)على wrappers كبيرة- نسيان
transform-originفي UI م hinged scale(0)للإخفاء دون خطة accessibility- 3D ثقيل عندما يكفي 2D
ملخص
transformيحرّك الصندوق المرسوم؛ التدفق غالباً ثابت- translate و rotate و scale و skew — سلسل الدوال في transform واحد
transform-originيحدد المحور- اربط transform مع transition؛ فضّل transform/opacity
- التالي: Animations (
@keyframes)
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى