خاصية Transform Origin
آخر تحديث: 2026-09-13
transform-origin خاصية Transform Origin
تحدد خاصية transform-origin النقطة — الأصل — التي يتحول العنصر حولها. الافتراضي هو مركز العنصر (50% 50%)، وتُنفَّذ جميع عمليات التدوير والقياس والانحراف حول هذه النقطة. ومن خلال تعديل الأصل يمكنك إنشاء تأثيرات مختلفة جداً، مثل التدوير حول حافة أو القياس من زاوية.
| الفئة | |
|---|---|
| القيمة الأولية | 50% 50% 0 |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
transform-origin: [<length> | <percentage> | left | center | right] [<length> | <percentage> | top | center | bottom] [<length>];⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<length> | <percentage> | النوع | إحداثيات أصل التحويل |
left | center | right | top | bottom | كلمة مفتاحية | موضع مُعرّف مسبقاً |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transform-origin | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يسري الثالث (أصل المحور Z) فقط في التحويلات ثلاثية الأبعاد وعادةً ما يُدمج مع perspective؛ أما التحويلات ثنائية الأبعاد فتحتاج القيمتين الأوليين فقط.
تلميح： الكلمات المفتاحية مثل left/center/right و top/center/bottom أكثر بداهة؛ استخدم النسب المئوية أو قيم الطول عند الحاجة إلى تحكم دقيق.
❓ الأسئلة الشائعة
Qلماذا يبدو عنصري منزلقاً عند الدوران حول المركز؟
Aافتراضياً يقع أصل التحويل عند المركز الهندسي للعنصر، لذا يدور rotate حول المركز. وللدوران حول إحدى زواياه أو حوافه، انقل الأصل إلى هناك — مثلًا، يجعل transform-origin: top left; العنصر يدور حول الزاوية العلوية اليسرى، مُنتجاً تأثيرات مثل باب يُفتح أو ريشة مروحة.
Qهل تؤثر خاصية transform-origin على النقل أو translate؟
Aلا. ينقل translate العنصر بأكمله ولا علاقة له بالأصل؛ ولا يؤثر الأصل إلا على التحويلات التي تحدث حول نقطة، مثل rotate و scale و skew. لذا في transform: translate(30px) rotate(45deg)، لا يتأثر ناتج النقل بـ transform-origin، ولكن يتبع المركز المرئي للدوران والقياس الأصل.
Qبالنسبة لِم تكون قيم النسبة المئوية لـ transform-origin في CSS؟
Aتُحسب النسب المئوية بالنسبة لأبعاد العنصر نفسه. يمثل 0% 0% الزاوية العلوية اليسرى، و 50% 50% المركز، و 100% 100% الزاوية السفلية اليمنى — مثلًا يستخدم transform-origin: 100% 50% منتصف الحافة اليمنى. ويمكنك أيضاً استخدام الكلمات المفتاحية left و center و right و top و bottom، أو قيم الطول مثل px لتحديد موضع دقيق.
Qهل يمكن استخدام transform-origin في التحويلات ثلاثية الأبعاد؟ كيف يعمل الثالث؟
Aنعم. يحدد القيمتان الأوليان الأصل على المستوى X/Y ويضبط الثالث (طول) أصل المحور Z، الذي يمتد افتراضياً إلى 0. على سبيل المثال، ينقل transform-origin: 50% 50% -20px الأصل 20px خلف العنصر، مما يعطي rotateX إحساساً مختلفاً بالعمق. وفي المشاهد ثلاثية الأبعاد، يحتاج العنصر الأصلي أيضاً إلى perspective لظهور التأثير.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
