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

Scale

📌 مفهوم

کلاس‌های scale برای تغییر اندازه‌ی عناصر با استفاده از transform: scale() به‌کار می‌رن.
اعداد همون ضریب مقیاس هستن.

📑 سینتکس کلی


scale-{n}
scale-x-{n}
scale-y-{n}

scale-{n} → مقیاس همزمان در محور X و Y
scale-x-{n} → فقط در محور X
scale-y-{n} → فقط در محور Y

📑 مقادیر پیش‌فرض

کلاس	مقدار	توضیح
`scale-0`	`transform: scale(0)`	کاملاً ناپدید میشه
`scale-50`	`transform: scale(0.5)`	نصف اندازه
`scale-75`	`transform: scale(0.75)`	75%
`scale-90`	`transform: scale(0.9)`	کمی کوچک‌تر
`scale-95`	`transform: scale(0.95)`	خیلی کم کوچک‌تر
`scale-100`	`transform: scale(1)`	اندازه اصلی
`scale-105`	`transform: scale(1.05)`	کمی بزرگ‌تر
`scale-110`	`transform: scale(1.1)`	10% بزرگ‌تر
`scale-125`	`transform: scale(1.25)`	25% بزرگ‌تر
`scale-150`	`transform: scale(1.5)`	1.5 برابر

📌 مثال ساده


<div class="flex gap-8">
  <div class="w-20 h-20 bg-blue-500 scale-50"></div>
  <div class="w-20 h-20 bg-green-500 scale-100"></div>
  <div class="w-20 h-20 bg-red-500 scale-150"></div>
</div>

📌 Scale در محور X یا Y


<div class="flex gap-8">
  <div class="w-20 h-20 bg-purple-500 scale-x-150"></div>
  <div class="w-20 h-20 bg-orange-500 scale-y-50"></div>
</div>

📌 ترکیب با Hover (کاربردی برای انیمیشن دکمه یا تصویر)


<button class="px-6 py-3 bg-indigo-600 text-white rounded-lg transform transition-transform duration-300 hover:scale-110">
  Hover Me
</button>

📌 در این مثال، دکمه وقتی هاور میشه کمی بزرگ‌تر میشه.

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

یادت باشه برای استفاده از scale حتماً transform باید فعال باشه (در Tailwind به‌طور خودکار اضافه میشه).
می‌تونی scale رو با rotate، translate و skew همزمان ترکیب کنی.