خاصية تحويل أصل CSS
مثال
تعيين الوضع الأساسي لعنصر تم تدويره:
div
{
transform: rotate(45deg);
transform-origin: 20% 40%;
}
التعريف والاستخدام
تتيح لك الخاصية تغيير transform-origin
موضع العناصر المحولة.
يمكن للتحويلات ثنائية الأبعاد تغيير المحور السيني والصادي لعنصر ما. يمكن للتحويلات ثلاثية الأبعاد أيضًا تغيير المحور z لعنصر ما.
لفهم transform-origin
الملكية بشكل أفضل ،
قم بمشاهدة العرض التوضيحي .
ملاحظة: يجب استخدام هذه الخاصية مع خاصية التحويل .
نصيحة: لفهم هذه الخاصية بشكل أفضل لعمليات التحويل ثلاثية الأبعاد ، شاهد العرض التوضيحي .
القيمة الافتراضية: | 50٪ 50٪ 0 |
---|---|
وارث: | رقم |
متحرك: | نعم. اقرأ عن animatable |
الإصدار: | CSS3 |
بناء جملة JavaScript: | الكائن .style.transformOrigin = "0 0" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
الأرقام متبوعة بـ -webkit- أو -moz- أو -o- تحدد الإصدار الأول الذي يعمل مع بادئة.
Property | |||||
---|---|---|---|---|---|
transform-origin (two-value syntax) |
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 (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
بنية CSS
transform-origin: x-axis y-axis z-axis|initial|inherit;
قيم الملكية
Property Value | Description |
---|---|
x-axis | Defines where the view is placed at the x-axis. Possible values:
|
y-axis | Defines where the view is placed at the y-axis. Possible values:
|
z-axis | Defines where the view is placed at the z-axis (for 3D transformations). Possible values:
|
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
الصفحات ذات الصلة
دروس CSS: تحويلات CSS 2D
برنامج CSS التعليمي: CSS 3D Transforms
مرجع HTML DOM: خاصية التحويل