با استفاده از ویژگی perspective-origin می توان موقعیتی که بیننده در آن فضای سه بعدی را مشاهده می کند را تعیین کرد.
نقطه ای که این ویژگی بر اساس محورهای X و Y تعیین می کند, توسط ویژگی perspective به عنوان نقطه گریز عنصر در فضای سه بعدی مورد استفاده قرار می گیرد.
نقطه گریز بصورت پیش فرض در مرکز قرار دارد اما بوسیله ویژگی 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 نیز این ویژگی پشتیبانی می شود. اما در اپرا این ویژگی کار نمی کند.
ممنون