الخاصية transform-origin

الخاصية transform-origin في CSS تسمح بتحديد مبدأ الإحداثيات للتحويلات التي ستجرى على العنصر، فمثلًا سيكون مبدأ إحداثيات العنصر الافتراضي عند تطبيق الدالة rotate()‎ هو مركز العنصر.

ستُطبَّق هذه الخاصية بنقل العنصر بمقدار قيمة هذه الخاصية مضروبةً بالعدد -1، ثم تطبيق التحويلات على العنصر، ثم تنقل العنصر بمقدار قيمة هذه الخاصية.

/* قيمة واحدة */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset y-offset */
transform-origin: 3cm 2px;

/* x-offset-keyword y-offset */
transform-origin: left 2px;

/* x-offset-keyword y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword x-offset-keyword */
transform-origin: top right;

/* x-offset y-offset z-offset */
transform-origin: 2px 30% 10px;

/* x-offset-keyword y-offset z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword y-offset-keyword z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword x-offset-keyword z-offset */
transform-origin: bottom right 2cm;

/* القيم العامة */
transform-origin: inherit;
transform-origin: initial;
transform-origin: unset;

القيمة الابتدائية	50% 50% 0
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	كما حُدِّدَت.

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	4.0 (مع السابقة -webkit-) 36.0	3.5 (مع السابقة -moz-) 16.0	9 (مع السابقة -ms-) 10	15 (مع السابقة -webkit-) 23	3.1 (مع السابقة -webkit-) 9.0
استخدام ثلاث قيم	نعم (مع السابقة -webkit-) 36.0	10.0 (مع السابقة -moz-) 16.0	9 (مع السابقة -ms-) 10	غير مدعومة	نعم (مع السابقة -webkit-) 9.0

البنية العامة

تقبل الخاصية transform-origin قيمةً واحدةً أو قيمتين أو ثلاث قيم:

• قيمة واحدة: يمكن أن تكون القيمة:
  • قيمةً طوليةً <length>
  • نسبةً مئويةً <percentage>
  • إحدى الكلمات المحجوزة left أو center أو right أو top أو bottom.
• قيمتان:
  • أوّل قيمة تُحدِّد الإحداثيات الأفقية للمبدأ، ويمكن أن تكون طولًا مطلقًا <length> أو نسبةً مئويةً <percentage> أو كلمة من الكلمات المحجوزة left أو center أو right.
  • ثاني قيمة تُحدِّد الإحداثيات الرأسية للمبدأ، ويمكن أن تكون طولًا مطلقًا <length> أو نسبةً مئويةً <percentage> أو كلمة من الكلمات المحجوزة top أو center أو bottom.
• ثلاث قيم:
  • أوّل قيمتان كما أسلفنا ذكره.
  • القيمة الثالثة تُمثِّل إحداثيات المبدأ على المحور z، ويجب أن تكون قيمةً طوليةً <length>.

الكلمات المحجوزة تكافئ النسب المئوية الآتية:

الكلمة المحجوزة	القيمة
left	0%
center	50%
right	100%
top	0%
bottom	100%

البنية الرسمية

transform-origin: [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?;

حيث:

<length-percentage> = <length> | <percentage>

مصادر ومواصفات

• مسودة CSS Transforms Level 2.