الخاصية transform-origin
< CSS
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
الخاصية 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.