ما الذي يمكن لتحويلات CSS أن تفعله؟

Question

Accepted Answer

خاصية `transform` تتيح لك **تحريك وتكبير وتدوير وإمالة** عنصر بصريًا — دون التأثير على تخطيط المستند (العناصر الأخرى لا تتحرك). يتم تسريعها بواسطة GPU، مما يجعلها مثالية للرسوم المتحركة.

```css
.box { transform: translate(50px, 20px); }  /* move right 50px, down 20px */
.box { transform: scale(1.5); }              /* 1.5× bigger (0.5 = half) */
.box { transform: rotate(45deg); }           /* rotate clockwise 45° */
.box { transform: skew(10deg); }             /* slant */
```

## دمج التحويلات (الترتيب مهم)

```css
.box {
  transform: translateX(100px) rotate(45deg) scale(1.2);
  /* applied right-to-left: scale, then rotate, then translate */
}
```

يتم تطبيق عدة دوال بالتسلسل؛ تغيير الترتيب يغير النتيجة (التدوير ثم التحريك يختلف عن التحريك ثم التدوير).

## لماذا التحويلات لا تعطل التخطيط

```css
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
```

على عكس تغيير `width`/`margin`، فإن التحويل يؤثر فقط على مظهر العنصر *المرسوم*، وليس صندوقه في التدفق — لذلك تبقى العناصر المحيطة في مكانها وليس هناك إعادة تدفق. هذا بالضبط لماذا التحويلات سلسة.

## الأنماط الشائعة

```css
/* center an absolutely-positioned element */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* hover lift */
.card:hover { transform: translateY(-4px); }

/* 3D and perspective */
.card { transform: perspective(500px) rotateY(15deg); }
```

خدعة `translate(-50%, -50%)` للمركزية منتشرة على نطاق واسع — تحرك العنصر للخلف بمقدار نصف *حجمه الخاص*.

## الأداء

```css
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
```

لأن التحويلات تتجاوز التخطيط والرسم (فقط التركيب)، فإن رسم متحرك لها يبقى بـ 60fps — أرخص بكثير من رسم الموضع/الحجم.

## لماذا يهم

التحويلات هي عمود العمل في رسوم CSS المتحركة والتفاعلات الدقيقة (تعليق الحوم، الشرائط المنفثقة، أجهزة العرض الدوارة، مؤشرات التحميل).

أنها تحرك/تكبر/تدوير دون تشغيل التخطيط، لذا فهي قوية وفعالة — الطريقة الموصى بها لرسم الحركة على الويب.