دالة CSS perspective()

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

CSS perspective() تعريف الدالة المسافة بين المستخدم وواجهة z=0.

perspective() الدالة في تحويل في استخدام الخاصية.

مثال

استخدم perspective() أضف تأثيرات بعض التماثل لكلا المكعبين:

.cube1 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(5cm) rotateX(-15deg) rotateY(30deg);
}
.cube2 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(10cm) rotateX(-15deg) rotateY(30deg);
}

تجربة شخصية

نص CSS

perspective(length|none)
القيمة الوصف
length مطلوب. تحديد المسافة بين المستخدم وواجهة z=0. none تعني عدم إجراء التحويل.

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

الإصدار: CSS Transforms Module Level 2

دعم المتصفح

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

Chrome Edge Firefox Safari Opera
perspective()
12 12 10 4 15
perspective(none)
97 97 93 15.4 83

الصفحات ذات الصلة

دليل التعليمات:تحويل CSS 3D

مرجع:خصائص transform CSS

مرجع:دالة CSS rotate()

مرجع:دالة CSS rotate3d()

مرجع:دالة CSS rotateX()

مرجع:دالة rotateY() CSS

مرجع:دالة rotateZ() CSS