خاصية `transform` تُطبّق تحولات هندسية على العنصر **دون التأثير في التدفق** — العناصر الأخرى لا تتأثر بموقعها.
**دوال transform الأساسية:**
**translate(x, y)** — تحريك العنصر: `transform: translate(20px, -10px);` `translateX()` / `translateY()` للتحريك في اتجاه واحد.
**rotate(angle)** — تدوير: `transform: rotate(45deg);` قيم سالبة تدور عكس عقارب الساعة.
**scale(x, y)** — تكبير/تصغير: `transform: scale(1.5);` — تكبير 150% `scale(0.8);` — تصغير `scaleX() / scaleY()` لاتجاه واحد.
**skew(x-angle, y-angle)** — انحراف: `transform: skew(15deg, 5deg);`
**دمج التحولات:** `transform: translate(-50%, -50%) rotate(45deg) scale(1.2);` تُقرأ من اليمين لليسار في التطبيق الفعلي.
| 1 | /* توسيط بـ translate */ |
| 2 | .centered { |
| 3 | position: absolute; |
| 4 | top: 50%; left: 50%; |
| 5 | transform: translate(-50%, -50%); |
| 6 | } |
| 7 | |
| 8 | /* دوران وتكبير */ |
| 9 | .card:hover { transform: scale(1.03) rotate(-1deg); } |
| 10 | |
| 11 | /* أيقونة محورية */ |
| 12 | .chevron.open { transform: rotate(180deg); } |
مثال 1: تأثيرات hover بـ transform
| 1 | .card { |
| 2 | transition: transform 0.3s ease, box-shadow 0.3s ease; |
| 3 | } |
| 4 | |
| 5 | .card:hover { |
| 6 | transform: translateY(-6px) scale(1.01); |
| 7 | box-shadow: 0 20px 40px rgba(0,0,0,0.15); |
| 8 | } |
| 9 | |
| 10 | /* زر يرتفع */ |
| 11 | .btn { |
| 12 | transition: transform 0.15s ease; |
| 13 | } |
| 14 | .btn:hover { transform: translateY(-2px); } |
| 15 | .btn:active { transform: translateY(0); } |
| 16 | |
| 17 | /* أيقونة تدور */ |
| 18 | .icon-spin { |
| 19 | transition: transform 0.4s ease; |
| 20 | } |
| 21 | .icon-spin:hover { transform: rotate(360deg); } |