ویژگی transform-style CSS

تعریف و استفاده

ویژگی transform-style تعیین می‌کند که چگونه عناصر فروکشیده در فضای سه‌بعدی نمایش داده شوند.

توضیحات:این ویژگی باید با transform ویژگی‌ها با هم استفاده شوند.

لطفاً به:

آموزش CSS3:تغییرات 2D CSS3

آموزش CSS3:تغییرات 3D CSS3

دستورالعمل مرجع HTML DOM:ویژگی transformStyle

مثال

حفظ تبدیل 3D عناصر فرزند:

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

آزمایش کنید

نوع CSS

transform-style: flat|preserve-3d;

مقدار ویژگی

مقدار توضیح
flat عناصر فرزند، موقعیت 3D خود را حفظ نخواهند کرد.
preserve-3d عناصر فرزند، موقعیت 3D خود را حفظ خواهند کرد.

جزئیات فنی

مقدار پیش‌فرض: flat
ارث: no
نسخه: CSS3
نوع جاوااسکریپت: object.style.transformStyle="preserve-3d"

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

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی هستند که این ویژگی را به طور کامل پشتیبانی می‌کنند.

اعدادهایی که با -webkit- یا -moz- همراه هستند، نشان‌دهنده نسخه اولیه‌ای هستند که از پیشوند استفاده می‌شود.

Chrome IE / Edge Firefox Safari Opera
36.0
12.0 -webkit-		 11.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-