دليل CSS

CSS @rules (القواعد)

كامل مواصفات CSS

خصائص perspective-origin في CSS3 خصائص page-break-inside في CSS

طريقة استخدام خاصية perspective CSS3 ومثال

يحدد خاصية perspective CSS منظر جميع عناصر الفرع لأي عنصر. إنه يحدد عادةً المسافة بين المستوى Z = 0 والمشاهد، مما يمنح العناصر الثلاثية الأبعاد شعور بالعمق. يصبح كل عنصر ثلاثي الأبعاد Z > 0 أكبر، بينما يصبح كل عنصر ثلاثي الأبعاد Z < 0 أصغر.

التالي هو شرح استخدام هذه الخاصية وأحداثيات التاريخ من إصداراتها، بالإضافة إلى استخدام الخاصية في جافا سكربت.

القيمة الافتراضية:	none
تطبيق:	العناصر القابلة للتشكيل
الوراثة:	لا يوجد
يمكن إنشاء الرسوم المتحركة:	نعم.يرجى الرجوع إلى خصائص التحريك.
الإصدار:	أداة CSS3 الجديدة
قواعد النحو لـ JavaScript:	object.style.perspective=500

قواعد النحو لـ Perspective

قواعد النحو لهذه الخاصية هي:

perspective:　length　|　none　|　initial　|　inherit

يوضح المثال التالي كيفية استخدام خاصية perspective.

مثال

.container　{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　500px;
　　　　border:　4px　solid　#e5a043;
　　　　background:　#fff2dd;
}
.transformed　{
　　　　-webkit-transform:　translate3d(25px,　25px,　50px);　/*　Chrome,　Safari,　Opera　*/
　　　　transform:　translate3d(25px,　25px,　50px);　
}

جربها‹/›

قيمة الخاصية

جدول يصف قيم هذه الخاصية.

القيمة	وصف
length	يحدد طول عمق المنظور. إذا كان صفرًا أو سالبًا، لا يتم تطبيق تحويل الوجهة البصرية.
none	لا تطبيق تحويل الوجهة البصرية. هذا هو القيمة الافتراضية.
initial	تقديم هذا الخصائص إلى قيمته الافتراضية.
inherit	إذا تم تحديد هذا، فإن العناصر المرتبطة تستخدم قيمة خاصية perspective للعنصر الأب.

مستوى التطابق للمتصفح

مستوى التطابق للمتصفح الخاص بخصائص perspective، الأرقام في الجدول التالي تمثل أحدث إصدار من المتصفح الذي يدعم هذه الخاصية؛ جميع المتصفحات الرئيسية تدعم هذه الخاصية.

	Firefox 10+ ^-moz-،16 + Google Chrome 12+ ^-webkit-،36+ Internet Explorer 10+ Apple Safari 4.0.3+ ^-webkit- Opera 15+ ^-webkit-،23+

قراءة متعمقة

يرجى الرجوع إلى التعليمات التالية:تحويلات 3D CSS3.

خصائص perspective-origin في CSS3 خصائص page-break-inside في CSS