perspective-origin

با استفاده از ویژگی perspective-origin می توان موقعیتی که بیننده در آن فضای سه بعدی را مشاهده می کند را تعیین کرد.

نقطه ای که این ویژگی بر اساس محورهای X و Y تعیین می کند, توسط ویژگی perspective به عنوان نقطه گریز عنصر در فضای سه بعدی مورد استفاده قرار می گیرد.

نقطه گریز بصورت پیش فرض در مرکز قرار دارد اما بوسیله ویژگی perspective-origin می توان آن را طوری تنظیم کرد که گویی کاربر از بالا یا پایین یا از کناره و یا از هر نقطه ای دیگر به صحنه موجود نگاه می کند.

 
تغییر ویژگی perspective-origin
 

این ویژگی زمانی تاثیر دارد که عنصر دارای ویژگی perspective باشد. در غیر این صورت هیچگونه تاثیری نخواهد داشت.

این ویژگی مقادیری از نوع طول (px, em,..) و درصد و همینطور کلمات کلیدی مثل top, right, bottom, left و center را می پذیرد.

که در راستای افق کلمات right, left, center به ترتیب معادل 50%, 0% و 100% می باشند.

و همینطور در راستای عمود کلمات کلیدی top, bottom, center به ترتیب معادل 50%, 0% و 100% هستند.

 
مقادیر متفاوت برای این ویژگی
 

اگر دو و یا یک مقدار برای این ویژگی تعیین شوند و هیچکدامشان کلمه کلیدی نباشند و یا تنها از کلمه کلیدی center استفاده شود در نتیجه مقدار اول, مکان در راستای افق و مقدار دوم مکان در راستای عمود می باشد.

اگر فقط یک مقدار تعیین شود مقدار دوم center در نظر گرفته می شود.

 


perspective-origin: top center;
perspective-origin: 100% 30px;
perspective-origin: 30px 60px;
perspective-origin: center;
perspective-origin: left;
perspective-origin: 30% 50% 0px;
perspective-origin: bototm right;

 

دموی زیر با با دقت بررسی کنید:
 

See the Pen perspective-origin by Mojtaba Seyedi (@seyedi) on CodePen.


 

 

پشتیبانی مرورگر ها

ویژگی perspective-origin در کروم و سافاری پشتیبانی می شود (از -webkit- به عنوان پیشوند استفاده می شود). همچنین در فایرفاکس (از -moz- در نسخه های 10 تا 16 به عنوان پیشوند استفاده می شود). در اینترنت اکسپلورر 10 به بالا, اندروید 3 به بالا و iOS نیز این ویژگی پشتیبانی می شود. اما در اپرا این ویژگی کار نمی کند.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *