پیشنهاد دوره:

دستور perspective() CSS

تعریف و استفاده perspective() CSS

perspective() این دستور فاصله کاربر تا سطح z=0 را مشخص می‌کند. transform در استفاده از این ویژگی.

مثال

استفاده از 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

صفحات مرتبط

آموزش:تغییرات 3D CSS

منابع:ویژگی transform CSS

منابع:دستور rotate() CSS

منابع:دستور rotate3d() CSS

منابع:دستور rotateX() CSS

منابع:توابع rotateY() CSS

منابع:توابع rotateZ() CSS