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

Rotate

📌 مفهوم

کلاس‌های rotate برای چرخوندن (rotate) المان‌ها استفاده میشه.
این کلاس‌ها از ویژگی CSS زیر استفاده می‌کنن:


transform: rotate(angle);

📑 سینتکس کلی


rotate-{angle}

{angle} زاویه چرخش بر حسب درجه (deg) هست.
مقدار پیش‌فرض هم برای محور Z اعمال میشه (مثل rotate معمولی در CSS).

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

کلاس	مقدار CSS	توضیح
`rotate-0`	`rotate(0deg)`	بدون چرخش
`rotate-1`	`rotate(1deg)`	1 درجه
`rotate-2`	`rotate(2deg)`	2 درجه
`rotate-3`	`rotate(3deg)`	3 درجه
`rotate-6`	`rotate(6deg)`	6 درجه
`rotate-12`	`rotate(12deg)`	12 درجه
`rotate-45`	`rotate(45deg)`	45 درجه
`rotate-90`	`rotate(90deg)`	90 درجه
`rotate-180`	`rotate(180deg)`	نیم‌دور (برعکس شدن کامل)

📌 همچنین نسخه‌های منفی هم داریم:

-rotate-45 → rotate(-45deg)

📌 مثال ساده


<div class="flex gap-8">
  <div class="w-20 h-20 bg-blue-500 rotate-0"></div>
  <div class="w-20 h-20 bg-green-500 rotate-45"></div>
  <div class="w-20 h-20 bg-red-500 -rotate-45"></div>
</div>

📌 ترکیب با Hover (پرکاربرد)


<img src="https://placekitten.com/100/100" 
     class="rounded-lg transform transition-transform duration-300 hover:rotate-12">

📌 وقتی هاور کنی، تصویر کمی می‌چرخه.

📌 ترکیب با Scale و Translate


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

📌 اینجا همزمان روی هاور → هم بزرگ‌تر میشه هم کمی می‌چرخه.

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

اگر نیاز به زاویه‌های دلخواه داری (غیر از پیش‌فرض)، می‌تونی در فایل tailwind.config.js مقدارهای custom تعریف کنی.
Rotate در Tailwind فقط روی محور Z هست، برای سه‌بعدی‌ها (rotateX, rotateY) باید از Utilities سفارشی یا CSS استفاده کنی.