خصوصیت transform-style
مثال (خصوصیت transform-style)
در این مثال، عناصر فرزند تبدیل سه بعدی خودشان را حفظ می کنند:
div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
خودتان امتحان کنید »{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
پشتیبانی مرورگرها
مرورگر Firefox خصوصیت transform-style را پشتیبانی می کند.
مرورگرهای Chrome و Safari از خصوصیت جایگزین webkit-transform-style- استفاده می کنند.
تعریف و کاربرد
با استفاده از خصوصیت transform-style می توان نحوه چرخیدن عناصر تو در تو را در فضای سه بعدی مشخص کرد.
توجه: این خصوصیت می بایست با خصوصیت transform به کار گرفته شود.
کاربران Chrome و Safari: برای درک بهتر خصوصیت transform-style به view a demo مراجعه فرمایید.
| مقدار پیشفرض | flat |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.transformStyle="preserve-3d" |
نحوه استفاده
transform-style: flat|preserve-3d;
| Property مقدار | توضیحات |
|---|---|
| flat |
عناصر فرزند موقعیت سه بعدی خود را حفظ نمی کنند. |
| preserve-3d |
عناصر فرزند موقعیت سه بعدی خود را نگه می دارند. |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 7101
