English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
يُمكن لخاصية transform-Origin تعديل موقع عنصر التحريك.
عناصر التحريك الثنائي يمكنها تغيير محور X و Y للعنصر. عناصر التحريك الثلاثي الأبعاد يمكنها أيضًا تغيير محور Z للعنصر.
في الجدول أدناه، يوجد شرح لاستخدام هذه الخاصية و سجله التاريخي، بالإضافة إلى جملة استخدام الخاصية في سكربتات JavaScript.
| القيمة الافتراضية: | 50% 50% 0 |
|---|---|
| يُستخدم مع: | العناصر القابلة للتشكيل |
| الوراثة: | لا |
| يمكن تحريكه: | نعم.يرجى الرجوع إلى خصائص التحريك。 |
| الإصدار: | ميزات CSS3 الجديدة |
| جملة JavaScript: | موضوع.style.transformOrigin="20@%" |
جملة هذه الخاصية كما يلي:
transform-origin: x-position | y-position | z-position | initial | inherit
ملاحظة:إذا تم تحديد قيمة واحدة فقط لخاصية transform-origin، يتم افتراض أن القيمة الثانية هي center، وهي تساوي 50%.
في هذا المثال، يتم عرض كيفية استخدام خاصية transform-origin.
img {
/* Chrome, Safari, Opera */
-webkit-transform: rotate(30deg);
-webkit-transform-origin: 25% bottom;
/* Firefox */
-moz-transform: rotate(30deg);
-moz-transform-origin: 25% bottom;
/* IE 9 */
-ms-transform: rotate(30deg);
-ms-transform-origin: 25% bottom;
transform: rotate(30deg);
transform-origin: 25% bottom;
}اختبار ل‹/›ملاحظة:إذا لم يكن أحد القيمين كلمة مفتاح،فالقيمة الأولى تمثل الموقع الأفقي للنقطة الأساسية للتحويل (أو التحريض)،والقيمة الثانية تمثل الموقع العمودي للنقطة الأساسية للتحويل (أو التحريض).
جدول التالي يصف قيم هذا الخصائص.
| القيمة | وصف |
|---|---|
| x-position | يُمثل الموقع الأفقي للنقطة الأساسية للتحويل (أو التحريض). يمكن أن يكون له أحد القيم التالية:
|
| y-position | يُمثل الموقع العمودي للنقطة الأساسية للتحويل (أو التحريض). يمكن أن يكون له أحد القيم التالية:
|
| وضع z | واحدlengthالقيمة،ت�述 المسافة من نقطة Z=0 الأصل (بالنسبة إلىتحويلات 3D）。لا يمكن استخدام النسبة المئوية. |
| initial | اعتماد هذا الخصائص إلى قيمته الافتراضية. |
| inherit | إذا تم تحديد،فالعناصر المرتبطة تستخدم قيمة الخاصية transform-origin للي elemento الوالدي. |
مستوى التطابق للمتصفح الخاص بخصائص transform-origin،الرقم في الجدول التالي يمثل أحدث إصدار للمتصفح يدعم هذا الخصائص؛جميع المتصفحات الشائعة تدعم هذا الخصائص.
|
يرجى الرجوع إلى الدروس التالية:تحويلات 2D CSS3،تحويلات 3D CSS3
خصائص مرتبطة:backface-visibility،perspective،perspective-origin،transform،transform-style。