الخاصية transform-origin
< CSS
اذهب إلى التنقل
اذهب إلى البحث
مراجعة 15:34، 28 يناير 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات) (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
الخاصية 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.