**transform-origin** يحدد النقطة التي تُنفَّذ حولها عمليات transform (الدوران والتكبير والانحراف).
**القيمة الافتراضية:** `50% 50%` — وسط العنصر.
**القيم:** - كلمات: `top`, `bottom`, `left`, `right`, `center` - نسب: `0% 0%` (الزاوية العلوية اليسارية) إلى `100% 100%` - قيم مطلقة: `20px 40px` - ثلاثة قيم (3D): `x y z`
**أمثلة عملية:** - `transform-origin: top center` — دوران من الأعلى (مثل تفتح باب) - `transform-origin: bottom left` — تكبير من الزاوية - `transform-origin: right center` — تكبير من اليمين
**التأثير على scale:** عند `scale(0)` مع origin مختلف، يبدو العنصر وكأنه يختفي في اتجاه بعينه.
| 1 | /* دوران حول الأعلى */ |
| 2 | .door { transform-origin: top center; } |
| 3 | .door:hover { transform: rotateX(-30deg); } |
| 4 | |
| 5 | /* تكبير من اليمين */ |
| 6 | .expand-right { transform-origin: right center; } |
| 7 | .expand-right:hover { transform: scaleX(1.3); } |
مثال 1: قائمة منسدلة بتأثير دوران
| 1 | .dropdown-menu { |
| 2 | transform-origin: top center; |
| 3 | transform: scaleY(0); |
| 4 | opacity: 0; |
| 5 | transition: transform 0.2s ease, opacity 0.2s ease; |
| 6 | } |
| 7 | |
| 8 | .menu-trigger:hover + .dropdown-menu, |
| 9 | .dropdown-menu:hover { |
| 10 | transform: scaleY(1); |
| 11 | opacity: 1; |
| 12 | } |
| 13 | |
| 14 | /* ✨ تأثير اهتزاز */ |
| 15 | @keyframes wiggle { |
| 16 | 0%, 100% { transform: rotate(0deg); } |
| 17 | 25% { transform: rotate(8deg); transform-origin: bottom center; } |
| 18 | 75% { transform: rotate(-8deg); transform-origin: bottom center; } |
| 19 | } |