توابع translateX() CSS
- صفحه قبلی توابع translate() CSS
- صفحه بعدی توابع translateY() CSS
- برگشت به طبقه بالاتر دستورالعملهای مرجع Function 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
- صفحه قبلی توابع translate() CSS
- صفحه بعدی توابع translateY() CSS
- برگشت به طبقه بالاتر دستورالعملهای مرجع Function CSS