perspective

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

بواسطه تغییر مکان یا وضعیت عنصر بر روی محور Z می توانید حس عمق را برای یک عنصر بوجود آورید. مثلا اگر به سمت مثبت محور Z عنصر حرکت کند (نزدیک تر به بیننده) عنصر بزرگتر, و اگر در جهت مخالف حرکت کند عنصر کوچک تر دیده می شود.

تصویر زیر را در نظر بگیرید:

 

در این تصویر دایره آبی نشان دهنده یک عنصر است که در فضای سه بعدی قرار گرفته است. حرف d بیانگر اندازه perspective می باشد که همان فاصله چشم بیننده تا نمایش گر فرض می شود. حرف z موقعیت و مکان عنصر را بر روی محور Z نشان می دهد که هرچه عنصر دورتر باشد در چشم بیننده کوچکتر به نظر می رسد و هر چه نزدیکتر باشد بیننده آن را بزرگتر می بیند. این همان تاثیر perspective در فضای سه بعدی می باشد.

 

این ویژگی مقادیر طولی یا کلمه none را به عنوان مقدار می پذیرد. زمانی که از مقادیر غیر از none برای این ویژگی استفاده می شود این ویژگی به عنصر همان حالتی را می دهد که زمانی که از transform برای یک عنصر استفاده می کنیم بوجود می آید. مثلا اینکه عنصر در یک لایه بالاتر نمایش داده می شود. یا اینکه مانند حالت position: relative عمل خواهد کرد. یعنی عناصر فرزند آن اگر position: absolute داشته باشند, نصب به آن مکانشان تعیین خواهد شد.

 

اگر برای عنصری از توابع سه بعدی ویژگی transform استفاده کنیم بدون اینکه برای آن ویژگی perspective را تعیین کنیم. عنصر به صورت دو بعدی و تخت ظاهر می شود.

در تصویر زیر عنصری را بصورت سه بعدی با استفاده از تابع ()rotateY می چرخانیم که یکی از عنصرها دارای ویژگی perspective می باشد و دیگری نه:

 

perspective در برابر ()perspective

زمانی که می خواهید عنصری را در فضای سه بعدی به حرکت در بیاورید می توانید با تنظیم ویژگی perspective برای عنصر پدر یا همان نگهدارنده آن این فضا را بوجود بیاورید. اما یک راه دیگر هم برای فعال سازی فضای سه بعدی برای این عنصر می باشد, آن هم اینکه از تابع ()perspective برای خود عنصر استفاده کنید.

حال این دو روش با هم چه تفاوت هایی دارند؟ و چه موقع باید از کدامیک استفاده کرد؟

هر دو روش با حرکت دادن عنصر بر روی محور Z به عنصر عمق می دهند. و هرچه مقداری که برای این دو روش تنظیم می شود کمتر باشد, عنصر به صفحه نمایش نزدیک تر و افکت چشمگیرتر می شود و تاثیر بیشتری دارد و هرچه مقدار بیشتر باشد عنصر از صفحه نمایش دورتر به نظر می رسد و افکت تاثیر کمتری خواهد داشت.

نکته ای که در تفاوت این دو روش باید در نظر داشت این است که: فرض کنید چندین عنصر در کنار هم وجود دارند و همه را می خواهید در فضای سه بعدی بچرخانید. اگر برای تک تک آنها از تابع ()perspective استفاده کنید و اندازه چرخش یکسان داشته باشند, همه بصورت منظم و یکسان در کنار هم چرخانده می شوند. اما اگر فقط از ویژگی perspective برای عنصر نگهدارنده آنها استفاده کنید میزان چرخش و نحوه نمایش عناصر متفاوت از هم خواهد بود. دلیل این موضوع این است که زمانی که برای یک عنصر حالت perspective تنظیم می شود برای عنصر یک نقطه گریز بوجود می آید. حال اگر از تابع ()perspective برای تک تک عناصر استفاده شود همه آنها نقطه گریز خود را خواهند داشت و شبیه به هم چرخانده می شوند اما اگر از ویژگی perspective برای عنصر نگهدارنده عناصر استفاده شود فقط یک نقطه گریز برای تمام عناصر وجود خواهد داشت و آن هم نقطه گریز عنصر نگهدارنده است و چون عناصر در مکان های مختلف قرار دارند پس هر کدام عکس العمل منخصر به خود را نسبت به آن نقطه نشان خواهند داد.

در CSS نقطه گریز برای یک عنصر توسط ویژگی perspective-origin تعیین و تنظیم می شود.

در ادامه این مقایسه به تصویر کشیده شده است. که تصویر سمت چپ نشان دهنده زمانی است که از ویژگی perspective برای عنصر نگهدارنده (container) استفاده می شود و سمت راست زمانی است که تابع آن برای تک تک عناصر تنظیم می شود:
 

 

زمانی که می خواهید از روش سمت چپ پیروی کنید خواهید داشت:

 

.container {
  perspective: 1800px;
}

.container .child {
  float: left;
  margin: 50px;
  transform: translateZ(-50px) rotateY(45deg);
}

 

و برای روش سمت راست:

 

.container .child {
  float: left;
  margin: 50px;
  transform: perspective(1800px) translateZ(-50px) rotateY(45deg);
}

 

اگر برای این ویژگی مقدار صفر تنظیم شود حالت سه بعدی فعال نخواهد شد. و همچنین مقادیر منفی قابل قبول نمی باشند.

یک مثال خوب برای درک هرچه بهتر این ویژگی, مثال مکعب می باشد. در دموی زیر سه مکعب همسان نمایش داده شده اند که هر کدام مقدار متفاوتی برای ویژگی perspective دارند. با تغییر مقادیر به درک بهتر موضوع کمک کنید. همچنین همانطور که مشاهده می کنید هر چه مقدار این ویژگی بیشتر باشد تاثیر افکت کمتر و هر چه مقدار آن کمتر باشد تاثیر بیشتری مشاهده می شود:

 

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

 

همچنین دموی زیر یک زمین بازی خوب برای یادگیری بهتر این موضوع می باشد:

See the Pen CSS3 Perspective Playground ✨ by Mojtaba Seyedi (@seyedi) on CodePen.

 

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