()translate

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

این تغییر مکان توسط بردار [x,y] انجام می شود که x تغییر مکان در راستای محور X و y در راستای محور Y است. به عنوان نمونه در مثال زیر عنصر 100 پیکسل به سمت راست و 100 پیکسل به سمت پایین حرکت می کند:


.element {    
  transform: translate(100px, 100px);
}

اگر مقدار دوم را وارد نکنید صفر در نظر گرفته می شود و در نتیجه عنصر فقط در راستای محور X حرکت خواهد کرد.

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

نتیجه مثال بالا به صورت زیر خواهد بود:

تغییر مکان دو بعدی در css

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

 

See the Pen translate(x,y) by Mojtaba Seyedi (@seyedi) on CodePen.

 

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

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

3 دیدگاه برای “()translate

  1. سلام مجتبی سیدی عزیز..چند جا دیدم برای یه عنصر از این ویژگی و هم از top و left و … استفاده کرده بودن در صورتی که جفتشون یه جور کار انجام میدادن ..چرا بنظرت

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