التحويلات الهندسية (Transforms)
أداة جبارة لتغيير شكل وحجم وموقع العناصر بدون التأثير على تخطيط الصفحة (Layout).
1. تحويلات الـ 2D
تحريك وتكبير وتدوير العناصر (مرر الماوس فوق المربعات).
المعاينة
Translate
Scale
Rotate
Skew
شرح الخصائص:
translate(x, y): لتحريك العنصر من مكانه (مثل التحريك للأعلى باستخدام قيمة Y سالبة). أفضل للأداء من استخدام margin!scale(n): تكبير/تصغير العنصر (1 هو الحجم الطبيعي، 1.5 يعني 150%).rotate(deg): تدوير العنصر بالدرجات (مثال: 45deg).skewX(deg) / skewY(deg): إمالة العنصر.
2. تحويلات الـ 3D
التحريك في المحور الثالث (Z) لعمل تأثيرات عميقة.
المعاينة
Rotate 3D
كيفية تفعيل الـ 3D؟
يجب إعطاء العنصر الأب خاصية perspective: 600px; (لإعطاء عمق للشاشة)، ثم استخدام rotateX أو rotateY أو translateZ على العنصر الابن.