()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.

 

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

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

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

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

  2. سلام آموزش هاتون عاااالین ممنون.
    من میخوام توسط دستور translate() عنصر رو به وسط صفحه بیارم،چطوری میشه این کار رو کرد؟؟

    میخوام وقتی رو عکس میرم با scale زوم بشه و بیاد وسط صفحه.
    تشکر.

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