با استفاده از تابع translate که برای ویژگی transform تعیین می شود می توان یک عنصر را در فضای دو بعدی جابجا کرد.
این تغییر مکان توسط بردار [x,y] انجام می شود که x تغییر مکان در راستای محور X و y در راستای محور Y است. به عنوان نمونه در مثال زیر عنصر 100 پیکسل به سمت راست و 100 پیکسل به سمت پایین حرکت می کند:
.element {
transform: translate(100px, 100px);
}
اگر مقدار دوم را وارد نکنید صفر در نظر گرفته می شود و در نتیجه عنصر فقط در راستای محور X حرکت خواهد کرد.
از واحدهای دیگری مثل em و rem و درصد و غیره هم می توانید برای مقدار دهی به این تابع استفاده کنید.
همینطور اعداد می توانند منفی باشد. که در این صورت اگر x منفی باشد عنصر در خلاف محور x و اگر y منفی باشد عنصر در خلاف محور y تغییر مکان خواهد داد.
نتیجه مثال بالا به صورت زیر خواهد بود:
لطفا دموی زیر را بررسی کنید. توجه داشته باشید که تغییر مکان در حالت hover صورت می گیرد و همینطور از transition برای واضح شدن حرکت استفاده شده است:
See the Pen translate(x,y) by Mojtaba Seyedi (@seyedi) on CodePen.
سلام مجتبی سیدی عزیز..چند جا دیدم برای یه عنصر از این ویژگی و هم از top و left و … استفاده کرده بودن در صورتی که جفتشون یه جور کار انجام میدادن ..چرا بنظرت
سلام.
اینو بخونید:
http://css-tricks.ir/reference/will-change
در مورد بحث انتخابگرها هم فصل مربوط به اون موضوع رو نگاه کنید مطلبش هست.
اینجا کسی جواب نمیده اگه بخوایم چند دفه یه عنصر رو جابجا کنیم چی
اینطوری باید از خاصیت انیمیشن استفاده کنی…
آره…
تو قسمت “لیست آموزشی” هستش
انیمیشن تو css رو خیلی قشنگ توضیح داده
سلام آموزش هاتون عاااالین ممنون.
من میخوام توسط دستور translate() عنصر رو به وسط صفحه بیارم،چطوری میشه این کار رو کرد؟؟
میخوام وقتی رو عکس میرم با scale زوم بشه و بیاد وسط صفحه.
تشکر.
سلام استاد،
یه نکته‌ای ذهنم رو درگیر کرده!
تا اونجایی که تو ریاضی خوندیم، جهت مثبت محور x به سمت راست و جهت مثبت محور y به سمت بالا بود.
اما چرا اینجا توی translate، جهت مثبت y موقع تغییر مکان میره به سمت پایین؟
میدونم قانونه‌ها…
ولی آخه چرا؟ هدفشون چی بوده؟ ??
سلام، اگر اشتباه نکنم بخاطر ترسیمات در دنیای کامپیوتر هستش که از اول همیشه از گوشه سمت چپ بالا، به سمت پایین و راست بوده.