فنکشن perspective() CSS

تعریف و استفاده

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

perspective() فنکشن در ترasnform در استفاده از این ویژگی.

مثال

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

مراجع:CSS transform کی اپریٹ کا حصہ

مراجع:CSS rotate() فنکشن

مراجع:CSS rotate3d() فنکشن

مراجع:CSS rotateX() فنکشن

مراجع:CSS rotateY() فنکشن

مراجع:CSS rotateZ() فنکشن