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

مراجعة 16:03، 29 أغسطس 2018

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

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

مسودة CSS Transforms Level 2.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>transform-origin</code>}}</noinclude>
 الخاصية <code>transform-origin</code> في CSS تسمح بتحديد مبدأ الإحداثيات للتحويلات التي ستجرى على العنصر، فمثلًا سيكون مبدأ إحداثيات العنصر الافتراضي عند تطبيق الدالة <code>rotate()‎</code> هو مركز العنصر.
+بطاقة الخاصية
+{| class="wikitable" style="width: 100%;"
+|-
+! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
+|<code>50% 50% 0</code>
+|-
+! scope="row" |تُطبَّق على
+|جميع العناصر.
+|-
+! scope="row" |قابلة للوراثة
+|لا
+|-
+!قابلة للتحريك
+|نعم
+|-
+! scope="row" |القيمة المحسوبة
+|كما حُدِّدَت.
+|}
 ستُطبَّق هذه الخاصية بنقل العنصر بمقدار قيمة هذه الخاصية مضروبةً بالعدد -1، ثم تطبيق التحويلات على العنصر، ثم تنقل العنصر بمقدار قيمة هذه الخاصية.<nowiki/><syntaxhighlight lang="css">
@@ سطر 36: / سطر 55: @@
 transform-origin: unset;
 </syntaxhighlight>
-{| class="wikitable" style="width: 100%;"
-|-
-! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
-|<code>50% 50% 0</code>
-|-
-! scope="row" |تُطبَّق على
-|جميع العناصر.
-|-
-! scope="row" |قابلة للوراثة
-|لا
-|-
-!قابلة للتحريك
-|نعم
-|-
-! scope="row" |القيمة المحسوبة
-|كما حُدِّدَت.
-|}
 ==دعم المتصفحات==
 {| class="wikitable"
@@ سطر 89: / سطر 90: @@
 تقبل الخاصية <code>transform-origin</code> قيمةً واحدةً أو قيمتين أو ثلاث قيم:
 * قيمة واحدة: يمكن أن تكون القيمة:
-** قيمةً طوليةً <code>[[CSS/length|<length>]]</code>
+** طوليةً <code>[[CSS/length|<length>]]</code>
 ** نسبةً مئويةً <code>[[CSS/percentage|<percentage>]]</code>
 ** إحدى الكلمات المحجوزة <code>left</code> أو <code>center</code> أو <code>right</code> أو <code>top</code> أو <code>bottom</code>.
@@ سطر 97: / سطر 98: @@
 * ثلاث قيم:
 ** أوّل قيمتان كما أسلفنا ذكره.
-** القيمة الثالثة تُمثِّل إحداثيات المبدأ على المحور z، ويجب أن تكون قيمةً طوليةً <code>[[CSS/length|<length>]]</code>.
+** القيمة الثالثة تُمثِّل إحداثيات المبدأ على المحور z، ويجب أن تكون  طوليةً <code>[[CSS/length|<length>]]</code>.
 الكلمات المحجوزة تكافئ النسب المئوية الآتية:
 {| class="wikitable"