الخاصية transform-origin

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

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

بطاقة الخاصية

القيمة الابتدائية 50% 50% 0
تُطبَّق على جميع العناصر.
قابلة للوراثة لا
قابلة للتحريك نعم
القيمة المحسوبة كما حُدِّدَت.
ستُطبَّق هذه الخاصية بنقل العنصر بمقدار قيمة هذه الخاصية مضروبةً بالعدد -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;

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

الميزة 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>

انظر أيضًا

  • صفحة الخاصية transform وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي transform-style.

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