属性 transform-origin CSS

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

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

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

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

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

ملاحظة:يجب أن تستخدم هذه الصفة مع transform الصفات التي تستخدم معها.

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

انظر أيضًا:

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

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

دليل HTML DOMصفة transformOrigin

مثال

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

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

تجربة شخصية

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

الجملة CSS

transform-origin: محور x محور y محور z;

قيمة الصفة

القيمة الوصف
محور x

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

  • اليسار
  • المركز
  • اليمين
  • الطول
  • %
محور y

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

  • الجزء العلوي
  • المركز
  • الأسفل
  • الطول
  • %
محور z

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

  • الطول

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

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

دعم المتصفح

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

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

الصفات كروم آي إي فايرفوكس سفاري أوبرا
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-