()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, بالا نیست؟

سوال داری؟ برو به پنل پرسش و پاسخ

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