الفرق بين المراجعتين لصفحة: «CSS/transform-origin»

مراجعة 15:34، 28 يناير 2018

الخاصية 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.

@@ سطر 130: / سطر 130: @@
 == مصادر ومواصفات ==
 * مسودة [https://drafts.csswg.org/css-transforms-2/#transform-style-property CSS Transforms Level 2].
-[[تصنيف:CSS]]
+[[تصنيف:CSS|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Property]]
+[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Transforms]]
+[[تصنيف:CSS Transforms|{{SUBPAGENAME}}]]