🟩 جلسه اول - 2D Transform در CSS

🧩 انواع توابع Transform

1. translate(x, y)

• جابجایی عنصر در محورهای افقی و عمودی
• مقدار اول: محور X
• مقدار دوم: محور Y

2. rotate(angle)

• چرخش عنصر بر اساس زاویه‌ی مشخص
• زاویه با واحد deg تعریف می‌شود

3. scale(x, y)

• بزرگ‌نمایی یا کوچک‌نمایی عنصر
• مقدار اول برای عرض (X)، مقدار دوم برای ارتفاع (Y)

مثال:

transform: scale(2);

🟢 عنصر دو برابر اندازه اصلی خود بزرگ‌تر می‌شود.

transform: scale(2, 1);

🟢 فقط در محور افقی دو برابر و در محور عمودی ثابت می‌ماند (در حالت hover در مثال استفاده شده).

4. skew(x-angle, y-angle)

• کج کردن عنصر در محور X و Y

مثال:

transform: skewY(40deg);

🟢 عنصر در محور عمودی ۴۰ درجه کج می‌شود.

⚠️ نکته مهم

فقط آخرین دستور transform در CSS اعمال می‌شود، مگر اینکه توابع را در یک خط بنویسیم 👇
مثلاً:

transform: translate(-30px, -50px) rotate(40deg) scale(2);