()translateX

با استفاده از تابع translateX که برای ویژگی transform تعیین می شود می توان یک عنصر را در فضای دو بعدی در جهت محور X جابجا کرد.

به عنوان نمونه در مثال زیر عنصر 100 پیکسل به سمت راست حرکت می کند:


.element {    
  transform: translateX(100px);
}

از واحدهای دیگری مثل em و rem و درصد و غیره هم می توانید برای مقدار دهی به این تابع استفاده کنید.
که در این صورت عنصر در خلاف محور x تغییر مکان خواهد داد.

لطفا دموی زیر را بررسی کنید. توجه داشته باشید که تغییر مکان در حالت hover صورت می گیرد و همینطور از transition برای واضح شدن حرکت استفاده شده است:

 

See the Pen translateX() by Mojtaba Seyedi (@seyedi) on CodePen.

 

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

سوالت رو توی پنل بحث و گفتگو مطرح کن.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *