خصوصیت 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 */
}

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

    

مرورگر 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

عناصر فرزند موقعیت سه بعدی خود را نگه می دارند.