استخدام الخاصية transform-style في CSS3 ومثال

خصائص transform-style في CSS تحدد إذا كانت العناصر الفرعية للمسطح تكون في الفضاء الثلاثي الأبعاد أم في مستوى العنصر نفسه. إذا كانت مسطحة، فإن العناصر الفرعية لن تكون مستقلة في الفضاء الثلاثي الأبعاد.

هذه الخاصية تنطبق فقط على العناصر التي تحتوي علىtransformمحدد الخاصية للعناصر الفرعية.

الجدول التالي يوضح استخدام هذه الخاصية والتاريخ التاريخي للإصدارات، بالإضافة إلى استخدام الخاصية في جملة JavaScript.

استخدام جملة transform-style

نموذج هذه الخاصية هو كما يلي:

transform-style:　flat　|　preserve-3d　|　initial　|　inherit

في المثال التالي، يتم عرض كيفية استخدام خاصية transform-style.

img　{
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-transform:　rotate(30deg);
　　　　-webkit-transform-style:　preserve-3d;
　　　　/*　Firefox　*/
　　　　-moz-transform:　rotate(30deg);
　　　　-moz-transform-style:　preserve-3d;
　　　　/*　IE　9　*/
　　　　-ms-transform:　rotate(30deg);
　　　　-ms-transform-style:　preserve-3d;
　　　　
　　　　transform:　rotate(30deg);
　　　　transform-style:　preserve-3d;
}

قيمة الخاصية

جدول التالي يصف قيم هذه الخاصية.

توافق المتصفحات

توافق المتصفحات لخصائص transform-style، الأرقام في الجدول التالي تمثل أحدث إصدار من المتصفحات التي تدعم هذه الخاصية؛ جميع المتصفحات الرئيسية تدعم هذه الخاصية.

قراءة المزيد

يرجى الرجوع إلى التعليمات التالية:تحويلات 2D CSS3,تحويلات 3D CSS3

خصائص مرتبطة:backface-visibility,perspective,perspective-origin,transform,transform-origin.