خصائص transform-origin CSS

التعريف والاستخدام

تسمح خاصية transform-origin بتغيير موقع العنصر المُحوّل.

عناصر التحويل الثنائي الأبعاد يمكنها تغيير المحاور x و y للعنصر. يمكن لعناصر التحويل الثلاثي الأبعاد أيضًا تغيير محور Z.

للتفهم أفضل استخدام خاصية transform-origin، انظر هذاالعرض.

للتفهم أفضل استخدام خاصية transform-origin في التحويلات الثلاثية الأبعاد، انظر هذاالعرض.

ملاحظة:يجب استخدام الخاصية transform استخدام الخاصية

للتفهم أفضل خاصية transform، انظر هذاالعرض.

انظر أيضًا:

دليل CSS3تحويلات 2D CSS3

دليل CSS3تحويلات 3D CSS3

دليل HTML DOMخصائص transform-origin

مثال

تحديد موقع نقطة البداية للعنصر الذي يتم التدوير:

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

جرب بنفسك

هناك أمثلة أكثر في قاع الصفحة.

جملة CSS

transform-origin: x-axis y-axis z-axis;

قيمة الخاصية

القيمة الوصف
x-axis

يحدد أين يتم وضع المشهد في المحور X. القيم الممكنة:

  • اليسار
  • الوسط
  • اليمين
  • length
  • %
y-axis

يحدد أين يتم وضع المشهد في المحور Y. القيم الممكنة:

  • الجزء العلوي
  • الوسط
  • الأسفل
  • length
  • %
z-axis

يحدد أين يتم وضع المشهد في المحور Z. القيم الممكنة:

  • length

تفاصيل التقنية

القيمة الافتراضية: 50% 50% 0
الوراثة: لا
الإصدار: CSS3
جافا سكربت الجملة: object.style.transformOrigin="20% 40%"

دعم المتصفح

الرقم في الجدول يشير إلى نسخة المتصفح الأولى التي تدعم الخاصية بالكامل.

الرقم المكتوب مع -webkit- أو -moz- أو -ms- يشير إلى استخدام الإسم المسبق للنسخة الأولى.

الخصائص Chrome IE Firefox Safari Opera
transform-origin
(قواعد القيمة الثنائية)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform-origin
(قواعد الثلاثة قيم)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-