تحويل CSS

دوال التحويل

مرجع سريع

الدالة	القيم	التأثير
`translate(x, y)`	`50px`، `-30px`، `50%`	تحريك العنصر
`translateX(x)`	`50px`	تحريك أفقي
`translateY(y)`	`-30px`	تحريك عمودي
`scale(n)`	`1.5`، `2`، `0.5`	مقياس (1 = أصلي)
`scaleX(n)`	`1.5`	مقياس أفقي
`scaleY(n)`	`0.8`	مقياس عمودي
`rotate(deg)`	`45deg`، `90deg`، `-180deg`	تدوير (موجب = مع عقارب الساعة)
`skew(x, y)`	`10deg`، `-5deg`	انحراف تشويه
`skewX(deg)`	`10deg`	انحراف أفقي
`skewY(deg)`	`10deg`	انحراف عمودي
`transform-origin`	`center`، `top left`، `50% 50%`	نقطة أصل التحويل

translate (تحريك)

مثال

HTML

<style>
.box {
  width: 100px;
  height: 100px;
  background: #3498db;
  transition: transform 0.3s;
}
.box:hover {
  transform: translate(50px, 20px);
}
</style>
<div class="box">hover للتحريك</div>

▶ جرّب الكود

scale (تغيير الحجم)

مثال

HTML

<style>
.box {
  width: 100px;
  height: 100px;
  background: #e74c3c;
  transition: transform 0.3s;
}
.box:hover {
  transform: scale(1.5);
}
</style>
<div class="box">hover للتكبير</div>

▶ جرّب الكود

rotate (تدوير)

مثال

HTML

<style>
.box {
  width: 100px;
  height: 100px;
  background: #2ecc71;
  transition: transform 0.3s;
}
.box:hover {
  transform: rotate(45deg);
}
</style>
<div class="box">hover للتدوير</div>

▶ جرّب الكود

transform-origin

يُغيّر نقطة مرجع التدوير/المقياس:

مثال

HTML

<style>
.box {
  width: 100px;
  height: 100px;
  background: #9b59b6;
  transform-origin: top left;
  transition: transform 0.3s;
}
.box:hover {
  transform: rotate(45deg);
}
</style>
<div class="box">تدوير من الزاوية العلوية اليسرى</div>

▶ جرّب الكود

دمج التحويلات

تحويلات متعددة تنفذ من اليسار إلى اليمين (ترتيب عكسي):

CSS

.box {
  transform: translateX(50px) rotate(45deg) scale(1.2);
  /* أولاً مقياس → ثم تدوير → أخيراً تحريك */
}

❓ أسئلة شائعة

س ما الفرق بين transform وتغيير top/left؟

ج transform يُشعل فقط مرحلة التركيب — لا يسبب إعادة تدفق تخطيط أو رسم، أداء أفضل. تغيير top/left يُشعل إعادة تدفق، مما يُسبب تقطيع الصفحة. للرسوم المتحركة، فضّل transform.

س ماذا يفعل transform: translate(-50%, -50%) مع position: absolute؟

ج حل توسيط كلاسيكي. `top: 50%; left: 50%; transform: translate(-50%, -50%);` أولاً يضع الزاوية العلوية اليسرى للعنصر في وسط الأصل، ثم translate يعيد بنصف أبعاده للتوسيط المثالي.

س هل تحتاج تحويلات ثلاثية الأبعاد إعداد خاص؟

ج عند استخدام `translateZ()` و`rotateX()` و`rotateY()` إلخ، أضف `perspective` للأصل (مثل `perspective: 1000px`)، وإلا قد لا تكون التأثيرات ثلاثية الأبعاد مرئية. تحويلات ثلاثية الأبعاد تُشعل تسريع GPU، أداء أفضل من ثنائية الأبعاد.

📖 ملخص

transform هو أساس الرسوم المتحركة CSS — translate وscale وrotate وskew يمكن دمجها في تأثيرات لا حصر لها
التحويلات لا تؤثر على تدفق المستند (العنصر "يبدو" مختلفاً لكن يشغل نفس المساحة)
تحويلات ثلاثية الأبعاد تحتاج perspective لتأثيرات العمق
عند دمج التحويلات، ضع translate أخيراً (ترتيب الكود أولاً)

📝 تمارين

أنشئ صندوقاً يتحرك 50px لليمين ويتكبر 1.5x عند hover.
أنشئ صورة تدور 180° حول المحور Y عند hover (تحتاج perspective).
أنشئ "بطاقة مقلوبة" — hover يقلب البطاقة لإظهار محتوى الوجه الخلفي (باستخدام rotateY وbackface-visibility).
استخدم transform-origin لتغيير مركز التدوير، أنشئ تأثير "بندول".