()translateY

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

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


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

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

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

 

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


 

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

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

2 دیدگاه برای “()translateY

  1. سلام خسته نباشین.مثل همیشه عالی.فقط خط اول ب جای translate x. باید مینوشتین translate y و اینه یک سوال. چرا مقادیر مثبت برای این تابع، عنصر رو به پایین انتقال میده؟ مگه جهت مثبت محور y, بالا نیست؟

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