خصائص تحويل النمط

التعريف والاستخدام

تحويل تطبيق تحويلات 2D أو 3D على العنصر. يسمح لك هذا الخصائص بتحويل العنصر، مثل التدوير، والتمدد، والتحرك، والثني، وما إلى ذلك.

يرجى الرجوع أيضًا إلى:

دليل مرجع CSS:خصوصية transform

مثال

تدوير عنصر div:

document.getElementById("myDIV").style.transform = "rotate(7deg)";

جرب بنفسك

النحو

إرجاع خاصية transform:

object.style.transform

تعيين خاصية transform:

object.style.transform = "none|transform-functions|initial|inherit"

قيمة الخاصية

القيمة الوصف
لا شيء تحديد عدم وجود تحويل.
matrix(n, n, n, n, n, n) استخدام مصفوفة من ستة معاملات لتحديد تحويل ثنائي الأبعاد.
matrix3d(n, n, n, n, وغيرها...) استخدام مصفوفة 4x4 من 16 قيمة لتحديد تحويل ثلاثي الأبعاد.
translate(x, y) تحديد تحويل التدرج ثنائي الأبعاد.
translate3d(x, y, z) تحديد تحويل التدرج ثلاثي الأبعاد.
translateX(x) تحديد تحويل التدرج، باستخدام قيمة المحور x فقط.
translateY(y) تحديد تحويل التدرج، باستخدام قيمة المحور y فقط.
translateZ(z) تحديد تحويل التدرج ثلاثي الأبعاد، باستخدام قيمة المحور z فقط.
scale(x, y) تحديد تحويل النسبية ثنائي الأبعاد.
scale3d(x, y, z) تحديد تحويل النسبية ثلاثي الأبعاد.
scaleX(x) تحديد تحويل النسبية عن طريق إعطاء قيمة ل المحور x.
scaleY(y) تحديد تحويل النسبية عن طريق إعطاء قيمة ل المحور y.
scaleZ(z) تحديد تحويل النسبية ثلاثي الأبعاد عن طريق إعطاء قيمة ل المحور z.
rotate(زاوية) تحديد دوران ثنائي الأبعاد، مع تحديد الزاوية كمعامل.
rotate3d(x, y, z, زاوية) تحديد دوران ثلاثي الأبعاد.
rotateX(زاوية) تحديد دوران ثلاثي الأبعاد على محور x.
rotateY(زاوية) تحديد دوران ثلاثي الأبعاد على محور y.
rotateZ(زاوية) تحديد دوران ثلاثي الأبعاد على محور z.
skew(زاوية x, زاوية y) تحديد تحويل انحناء ثنائي الأبعاد على محور x و y.
skewX(زاوية) تحديد تحويل انحناء ثنائي الأبعاد على محور x.
skewY(زاوية) تحديد تحويل انحناء ثنائي الأبعاد على محور y.
perspective(n) تحديد رؤية العنصر المُتحول ثلاثي الأبعاد.
initial يُضبط هذا الخاصية إلى قيمتها الافتراضية. يرجى الرجوع إلى initial.
inherit يرث هذا الخاصية من العنصر الأم. يرجى الرجوع إلى inherit.

تفاصيل التقنية

القيمة الافتراضية: لا شيء
القيمة المعدلة: قيمة النص، تمثل خصوصية transform.
إصدار CSS: CSS3

دعم المتصفح

الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم الخاصية بشكل كامل لأول مرة.

مثل Chrome مثل Edge مثل Firefox مثل Safari مثل Opera
مثل Chrome مثل Edge مثل Firefox مثل Safari مثل Opera
مثل 36.0 مثل 10.0 مثل 16.0 مثل 9.0 مثل 23.0