الخاصية 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.
مصادر ومواصفات
- مسودة CSS Transforms Level 2.