این آموزش در تاریخ ۱۴۰۰/۱۱/۱۲ آپدیت شده است.
آموزش ویژگی perspective در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی perspective در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی perspective در CSS
با استفاده از ویژگی perspective ( پِرس پِکتیو ) در CSS میتوان یک فضا ( حالت یا چشم انداز ) سه بعدی ( ۳D ) را بروی یک عنصر ایجاد و یا تعریف کرد. ( مثال شماره ۱ و ۲ رو حتما نگاه کنید )
- هرچقدر مقداری که به perspective میدیم بزرگتر باشه یعنی فاصله ( دید ما نسبت به باکس ) دورتر هست ، مثلا در مثال شماره ۱ مقدار دادیم ۱۰۰۰ پیکسل، این یعنی فاصله دید ما نسبت به باکس مثلا ۱۰۰۰ پیکسل باشه.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی perspective را در زبان CSS مشاهده نمایید.
مثال شماره ۱
|
1 2 3 |
.MyBox { perspective: 1000px; } |
مثال شماره ۲ : لطفا ماوس رو بروی تصویر موجود در مثال زیر ببرید
|
1 2 3 |
.card{ perspective: 300px; } |
Free-Learn
جدول مشخصات ویژگی perspective در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | none |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.perspective=”250px”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی perspective در CSS پشتیبانی میکنند یا خیر.
» عددی که در کنار -webkit- و -moz- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوندها استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| perspective | ۳۶ ۱۲ تا ۳۵ -webkit- |
۱۶ ۱۰ تا ۱۵ -moz- |
۲۳ ۱۵ تا ۲۲ -webkit- |
۹ | ۱۲ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
perspective: none|length|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی perspective در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| none | مقدار پیش فرض – هیچ نمایی ( چشم انداز ) ۳ بعدی ایجاد نمیکند |
| length | استفاده از واحدهای اندازه گیری مثه PX و… ( آموزش واحدهای اندازه گیری در CSS ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- این ویژگی بروی عناصر فرزند ( Child ) یک عنصر تاثیر میگذارند و بروی عنصر پدر یا ظرف اصلی هیچ تاثیری ندارد.
- با استفاده از ویژگی perspective-origin نیز میتوان موقعیت قرار گیری / زوایه نگاه کاربر به فضای ۳D را مشخص کرد.
- برخی از مرورگرها در نسخه های قدیمی تر از این ویژگی پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.
- -webkit- برای مرورگر کروم و اُپرا
- -moz- برای مرورگر موزیلا فایرفاکس
