ویژگی transform-style در CSS

transform-style Property

ویژگی transform-style در CSS مشخص می کند که در حالت نمایشِ سه بعدی، فرزندان یک عنصر به چه نحو نمایش داده شوند. بصورت flat (دو بعدی) و یا تغییر حالت در فضای سه بعدی.

نحوه نوشتار

transform-style: flat;
transform-style: preserve-3d;

نکته: توجه داشته باشید که این ویژگی باید همراه با ویژگی transform بکار رود. بصورت زیر:

div {
  transform: rotateY(30deg);
  transform-style: preserve-3d;
}

مقادیر

flat​

مشخص می کند که عنصر فرزند در حالت دو بعدی قرار می گیرد.

preserve-3d​

مشخص می کند که عنصر فرزند در حالت دو بعدی قرار می گیرد.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="box1">
      <div class="box2">flat</div>
</div>
<div class="box3">
      <div class="box4">preserve-3d</div>
</div>

css

.box1,
.box3 {
    width: 200px;
    height: 100px;
    margin: 30px;
    background-color: rgba(144, 238, 144, 0.75);
    position: relative;
    text-align: center;
}
.box1 {
    transform-style: flat; 
}
.box3 {
    transform-style: preserve-3d; 
}
.box2,
.box4 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 25%;
    background-color: pink;
    transform: rotateY(10deg);
}

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

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