خصائص transform CSS

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

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

للتفهم أفضل الخاصية التحويلية، يرجى الرجوع إلى هذاعرض.

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

دليل تعليمات CSS3تحويلات 2D CSS3

دليل تعليمات CSS3تحويلات 3D CSS3

دليل HTML DOMخاصية التحويل

مثال

تدوير عنصر div:

div
{
تحويل: تدوير(7 درجة);
}

تجربة شخصية

هناك أمثلة أكثر في قاعدة البيانات.

نص النمذجة CSS

تحويل: لا شيء|وظائف التحويل;

قيمة الخاصية

القيمة الوصف الاختبار
لا شيء تعريف عدم التحويل. الاختبار
matrix(n,n,n,n,n,n) تعريف التحويلات الثنائية الأبعاد باستخدام مصفوفة تحتوي على ستة قيم. الاختبار
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) تعريف التحويلات الثلاثية الأبعاد باستخدام مصفوفة 4x4 تحتوي على 16 قيمة.
translate(x,y) 定义 2D 转换。 الاختبار
تحويل(x,y,z) تحديد-التحويل-ثنائي-الأبعاد.
تحويل-التناسق-ثلاثي-الأبعاد(x) تحديد-التحويل-ثلاثي-الأبعاد. الاختبار
تحويل-التناسق-ثلاثي-الأبعاد(y) تحديد-التحويل، باستخدام قيمة المحور X فقط. الاختبار
تحويل-التناسق-ثلاثي-الأبعاد(z) تحديد-التحويل، باستخدام قيمة المحور Y فقط.
تحويل-التناسق-ثلاثي-الأبعاد(x,y) تحديد-التحويل-ثلاثي-الأبعاد، باستخدام قيمة المحور Z فقط. الاختبار
تناسق-التحويل-ثنائي-الأبعاد(x,y,z) تحديد-التحويل-التناسق-ثلاثي-الأبعاد.
تناسق-التحويل-ثلاثي-الأبعاد(x) تحديد-التحويل-التناسق، من خلال تعيين قيمة المحور X. الاختبار
تناسق-التحويل-ثنائي-الأبعاد(y) تحديد-التحويل-التناسق، من خلال تعيين قيمة المحور Y. الاختبار
تناسق-التحويل-ثلاثي-الأبعاد(z) تحديد-التحويل-ثلاثي-الأبعاد-التناسق، من خلال تعيين قيمة المحور Z.
التحويل-ثنائي-الأبعاد(زاوية) تحديد-التحويل-ثنائي-الأبعاد، في المعلمات يحدد الزاوية. الاختبار
التحويل-ثلاثي-الأبعاد(x,y,z,زاوية) تحديد-التحويل-ثلاثي-الأبعاد.
التحويل-ثلاثي-الأبعاد-بالمحور-الافقي(زاوية) تحديد-التحويل-ثلاثي-الأبعاد-بالمحور-الافقي. الاختبار
التحويل-ثلاثي-الأبعاد-بالمحور-العمودي(زاوية) تحديد-التحويل-ثلاثي-الأبعاد-بالمحور-العمودي. الاختبار
التحويل-ثلاثي-الأبعاد-بالمحور-العمودي(زاوية) تحديد-التحويل-ثلاثي-الأبعاد-بالمحور-العمودي. الاختبار
التحويل-الثنائي-الأبعاد(زاوية-x,زاوية-y) تحديد-التحويل-الثنائي-الأبعاد-بالمحور-الافقي-والعمودي. الاختبار
التحويل-الثنائي-الأبعاد-بالمحور-الافقي(زاوية) تحديد-التحويل-الثنائي-الأبعاد-بالمحور-الافقي. الاختبار
التحويل-الثنائي-الأبعاد-بالمحور-العمودي(زاوية) تحديد-التحويل-الثنائي-الأبعاد-بالمحور-العمودي. الاختبار
منظورية(n) تحديد-الرؤية-المنظورية-للمكونات-المتحولة-3D. الاختبار

تفاصيل-التكنولوجيا

القيمة-الافتراضية: لا شيء
التنسيخ: لا
الإصدار: CSS3
جملة-لغة-جافا-سكريبت: الجسم.style.transform="rotate(7deg)"

مزيد-من-المثاليات

صورة-تم-رميها-على-الطاولة
هذا المثال يظهر كيفية إنشاء صورة 'بوليراي' ولف الصورة.

دعم-المتصفح

الرقم-في-الجدول-يحدد الإصدار الأولي للbrowser الذي يدعم الخاصية.

الرقم-الذي-يحمل-السلاسل-المقدمة-بـ-webkit-،-moz- أو -ms- يمثل الإصدار الأولي الذي يستخدم السلاسل المقدمة.

الخصائص Chrome IE / Edge Firefox Safari Opera
تحويل-(2D) 36.0
4.0-webkit-		 10.0
9.0-ms-		 16.0
3.5-moz-		 9.0
3.2-webkit-		 23.0
15.0-webkit-
10.5-o-
تحويل-(3D) 36.0
12.0-webkit-		 12.0 10.0 9.0
4.0-webkit-		 23.0
15.0-webkit-