وظيفة CSS translateY()

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

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

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

مثال

إعادة توجيه مختلف العناصر <div> في الاتجاه العمودي:

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

تجربة شخصية

نصاب CSS

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

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

الإصدار: مستوى 1 لمodule CSS Transforms

دعم المتصفح

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

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

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

دليل:تحويل CSS 2D

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

مرجع:دالة translate() CSS

مرجع:دالة translateX() CSS

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