93. تحويلات CSS ثنائية الأبعاد (2D)

تسمح لك التحويلات (Transforms) بتحريك، وتدوير، وتغيير حجم، وإمالة عنصر في مساحة ثنائية الأبعاد. وهي فعالة للغاية لأنها تعمل على GPU (وحدة معالجة الرسومات)، مما يجعلها مثالية للانتقالات والرسوم المتحركة السلسة.

خاصية transform

يتم تطبيق جميع وظائف التحويل عبر خاصية transform .

1. translate() (تحريك الموضع)

يحرك العنصر من موقعه الحالي دون التأثير على العناصر الأخرى (خلافاً للتموضع النسبي). يأخذ قيم X و Y.

css /* يحرك العنصر 50 بكسل لليمين و 10 بكسل للأسفل */ .move-me { transform: translate(50px, 10px); }

/* استخدام شائع: توسيط صندوق منبثق (يحرك العنصر -50% من عرضه/ارتفاعه الشخصي) */ .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

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

يزيد أو ينقص حجم العنصر (1 هو الحجم الأصلي).

css .card:hover { /* يكبر البطاقة بنسبة 10% عند تمرير الماوس */ transform: scale(1.1); }

3. rotate() (التدوير)

يدور العنصر حول نقطة مركزه (يأخذ وحدات الزاوية مثل deg).

css .icon-open { transform: rotate(180deg); }

ربط التحويلات (Chaining): يمكنك دمج تحويلات متعددة في إعلان واحد، مفصولة بمسافات.

css .combo { transform: translateX(10px) rotate(45deg) scale(0.9); }