تابع translate() در CSS برای جابجایی عناصر در محور X و Y استفاده میشود. با این تابع میتوان موقعیت عناصر را بدون تغییر جریان طبیعی صفحه تغییر داد و افکتهای حرکتی جذاب ایجاد کرد. برای یادگیری بیشتر و مثالهای عملی، به دوره آموزش CSS مراجعه کنید.
ساختار تابع translate
translate(x, y)- x: میزان جابجایی در محور افقی
- y: میزان جابجایی در محور عمودی
مثال عملی تابع translate
.translate-box {
transform: translate(50px, 100px);
width: 200px;
height: 200px;
background-color: #3498db;
}جدول ویژگیها و توضیحات
| ویژگی | توضیح |
|---|---|
| x | میزان جابجایی در محور افقی (px, %, em) |
| y | میزان جابجایی در محور عمودی (px, %, em) |
نکات مهم
- تابع translate() بخشی از ویژگی transform در CSS است.
- میتوان از واحدهای مختلف مانند px, %, em برای جابجایی استفاده کرد.
- ترکیب translate با rotate و scale افکتهای حرکتی جذاب و حرفهای ایجاد میکند.
- برای حرکت عناصر بدون تغییر جریان طبیعی صفحه، استفاده از translate توصیه میشود.
ادامه آموزش
برای یادگیری کامل افکتهای حرکتی و transform در CSS، حتماً دوره آموزش CSS را مشاهده کنید.
آموزش قبلی: آموزش تابع url در CSS
آموزش بعدی: آموزش تابع scale در CSS
دیدگاه و پرسش