وظيفة CSS translateX()

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

تعريف CSS translateX() الوظيفة تسمح لك بإعادة تحديد موقع العنصر على المحور x (الاتجاه الأفقي).

translateX() الوظيفة في تحويل في استخدام الخاصية.

مثال

إعادة تحديد الموقع الأفقي للعناصر <div> المختلفة:

#myDiv1 {
  transform: translateX(50px); /* يتحرك العنصر على المحور x ب 50px */
}
#myDiv2 {
  transform: translateX(100px); /* يتحرك العنصر على المحور x ب 100px */
}
#myDiv3 {
  transform: translateX(-10px); /* يتحرك العنصر على المحور x ب -10px */
}

تجربة شخصية

نحو اللغة CSS

translateX(x)
القيمة الوصف
x مطلوب. يحدد المسافة التي يتحرك فيها العنصر على المحور x، يمكن أن يكون عددًا أو نسبة.

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

الإصدار: مodule CSS Transforms Level 1

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الوظيفة بشكل كامل.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

الصفحات ذات الصلة

دروس:تحويلات CSS 2D

المرجع:خصائص transform CSS

المرجع:وظيفة translate CSS

المرجع:وظيفة translateY CSS

المرجع:خصائص transform HTML DOM