ویژگی perspective در CSS

perspective Property

ویژگی perspective در CSS بُعد سوم را به عنصر اضافه می کند و باعث می شود که عنصر سه بعدی دیده شود.

نحوه نوشتار

perspective: none;

perspective: 500px;  
perspective: 3.5em;

نکته: هرچه مقدار کمتر باشد شدت افکت سه بعدی بیشتر است.

نکته: وقتی به عنصری ویژگی perspective داده می شود، این ویژگی به فرزند آن اعمال میشود و نه به خود عنصر. همچنین برای به نمایش درآمدن این ویژگی باید به عنصر فرزند، ویژگی transform داده شود.

html

<div class="box1">
   <div class="box2">BOX2</div>
</div>

css

.box1 {
   width: 300px;
   height: 200px;
   border: 1px solid #333333;
   perspective: 70px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 40px auto;
}
.box2 {
   width: 200px;
   height: 100px;
   background-color: #999999;
   transform: rotateY(20deg);
   display: flex;
   justify-content: center;
   align-items: center;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
همه مرورگرها از این ویژگی در CSS پشتیبانی می گنند.