English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
تعريف خاصية perspective-origin يحدد المحور X والي Y التي تعتمد عليها العناصر ثلاثية الأبعاد. هذه الخاصية تتيح لك تغيير موقع القاعدة للعناصر ثلاثية الأبعاد. عند تعريف perspective-Origin، فإنها تكون خصيصة للعنصر الفرعي، وليس العنصر نفسه.
في الجدول أدناه، يوضح استخدام هذه الخاصية وتاريخ إصداراتها، بالإضافة إلى جملة استخدامها في سكربتات JavaScript.
| القيمة الافتراضية: | 50P% |
|---|---|
| تطبيقه: | عناصر القابلة للتشكيل |
| الوراثة: | لا |
| يمكنه التحرك: | نعم.يرجى الرجوع إلى خصائص الرسوم المتحركة. |
| الإصدار: | ميزات CSS3 الجديدة |
| جملة JavaScript: | مثل.style.perspectiveOrigin="20%" |
يبدو جملة هذا الخصوصية كالتالي:
perspective-origin: [ x-position y-position ] | initial | inherit
ملاحظة:إذا تم تحديد قيمة واحدة فقط لخاصية perspective-origin، فإن القيمة الثانية افتراضية تكون في المركز، تساوي 50% من القيمة.
في هذا المثال، يتم عرض كيفية استخدام خاصية perspective-origin.
.container{
width: 125px;
height: 125px;
perspective: 300px;
perspective-origin: 20% top;
border: 4px solid #a2b058;
background: #f0f5d8;
}
.transformed {
-webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
transform: rotate3d(0, 1, 0, 60deg);
}اختبار ل‹/›ملاحظة:إذا لم تكن إحدى القيمين كلمة مفتاحية، فإن القيمة الأولى تمثل الموقع الأفقي للنقطة الأصلية للرؤية (أو الانحراف)، والقيمة الثانية تمثل الموقع العمودي للنقطة الأصلية للرؤية (أو الانحراف).
جدول التالي يصف القيم لهذا الخصائص.
| القيمة | وصف |
|---|---|
| x-axis | يُمثل الموقع الأفقي للنقطة الأصلية للرؤية (أو الانحراف). يمكن أن يكون له القيم التالية واحدة منها:
|
| y-axis | يُمثل الموقع العمودي للنقطة الأصلية للرؤية (أو الانحراف). يمكن أن يكون له القيم التالية واحدة منها:
|
| initial | ضبط هذا الخصائص إلى قيمته الافتراضية. |
| inherit | إذا تم تحديد، فإن العناصر المرتبطة تستخدم قيمة خصائص perspective-origin للعنصر الأم. |
مستوى التوافق للمتصفحات الخاصة بخصائص perspective-origin، الأرقام في الجدول التالي تمثل أحدث إصدار من المتصفح يدعم هذا الخصائص. جميع المتصفحات الشائعة يدعم هذا الخصائص.
|
يرجى الرجوع إلى التعليمات التالية:CSS3 تحويلات ثلاثية الأبعاد.
خصائص ذات صلة:perspective,backface-visibility,transform,transform-origin,transform-style.