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 پشتیبانی می کنند.