توابع translateX() CSS

تعریف و استفاده

CSS translateX() توابع به شما اجازه می‌دهند که عناصر را در محور x (جهت افقی) مجدد کنید.

translateX() توابع در ترasnform در استفاده از این属性.

مثال

تعیین مجدد مکان عمودی عناصر <div> مختلف به صورت افقی:

#myDiv1 {
  transform: translateX(50px); /* حرکت عنصر به سمت راست 50px در محور x */
}
#myDiv2 {
  transform: translateX(100px); /* حرکت عنصر به سمت راست 100px در محور x */
}
#myDiv3 {
  transform: translateX(-10px); /* حرکت عنصر به سمت چپ 10px در محور x */
}

آزمایش کنید

زبان CSS

translateX(x)
مقدار توضیح
x ضروری. فاصله حرکت عنصر در محور x را تعریف می‌کند، می‌تواند عدد یا درصد باشد.

جزئیات فنی

نسخه: موقعه CSS Transforms Level 1

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این تابع را کامل پشتیبانی می‌کنند.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

صفحات مرتبط

آموزش:ترادرسازی 2D CSS

منابع:ویژگی transform CSS

منابع:توابع translate() CSS

منابع:توابع translateY() CSS

منابع:ویژگی transform HTML DOM