با استفاده از تابع translateX که برای ویژگی transform تعیین می شود می توان یک عنصر را در فضای دو بعدی در جهت محور X جابجا کرد.
به عنوان نمونه در مثال زیر عنصر 100 پیکسل به سمت راست حرکت می کند:
.element {
transform: translateX(100px);
}
از واحدهای دیگری مثل em و rem و درصد و غیره هم می توانید برای مقدار دهی به این تابع استفاده کنید.
که در این صورت عنصر در خلاف محور x تغییر مکان خواهد داد.
لطفا دموی زیر را بررسی کنید. توجه داشته باشید که تغییر مکان در حالت hover صورت می گیرد و همینطور از transition برای واضح شدن حرکت استفاده شده است:
See the Pen translateX() by Mojtaba Seyedi (@seyedi) on CodePen.
سوال داری؟ برو به پنل پرسش و پاسخ