تابز مدیا | آموزش قدم به قدم برنامه نویسی

Translate

📌 مفهوم

کلاس‌های translate برای جابجا کردن المان‌ها روی محور X و Y استفاده میشن.

در CSS معادلش هست:


transform: translateX(...);
transform: translateY(...);

📑 سینتکس کلی


translate-x-{value}
translate-y-{value}

x → حرکت روی محور افقی (چپ و راست)
y → حرکت روی محور عمودی (بالا و پایین)
{value} → مقادیر پیش‌فرض یا سفارشی Tailwind

📑 مقادیر پیش‌فرض (Built-in)

کلاس	مقدار CSS
`translate-x-0`	`translateX(0px)`
`translate-x-px`	`translateX(1px)`
`translate-x-0.5`	`translateX(0.125rem)`
`translate-x-1`	`translateX(0.25rem)`
`translate-x-2`	`translateX(0.5rem)`
`translate-x-4`	`translateX(1rem)`
`translate-x-8`	`translateX(2rem)`
`translate-x-1/2`	`translateX(50%)`
`translate-x-full`	`translateX(100%)`

همین مقادیر برای translate-y هم وجود دارن.

📌 مقادیر منفی هم داریم:

-translate-x-1/2 → translateX(-50%)
-translate-y-full → translateY(-100%)

📌 مثال ساده


<div class="relative w-40 h-40 bg-gray-200">
  <div class="absolute top-0 left-0 w-16 h-16 bg-blue-500 translate-x-8 translate-y-8"></div>
</div>

📌 مربع آبی نسبت به گوشه‌ی بالا-چپ ۸ واحد به راست و ۸ واحد پایین میره.

📌 ترکیب با Hover


<button class="px-6 py-3 bg-green-600 text-white rounded-lg transform transition duration-300 hover:translate-x-4">
  Move Right
</button>

📌 وقتی هاور کنی دکمه به راست حرکت می‌کنه.

📌 ترکیب با Rotate و Scale


<img src="https://placekitten.com/100/100" 
     class="rounded-lg transform transition duration-500 hover:translate-y-4 hover:scale-110 hover:rotate-6">

📌 روی هاور: تصویر پایین میره + بزرگ میشه + کمی می‌چرخه.

📌 نکته حرفه‌ای

اگر بخوای حرکت دقیق‌تری بدی می‌تونی مقادیر سفارشی توی tailwind.config.js اضافه کنی.
Translate بر اساس position (نقطه‌ی اولیه‌ی خودش) عمل می‌کنه، نه کل صفحه.
ترکیب Translate با absolute / relative positioning خیلی کاربردیه.