مقیاس، چرخش و کجی: scale، rotate و skew

در درس قبل، خانواده translate رو دیدیم. حالا وقتشه سه خانواده دیگه از توابع Transform رو، که در فصل ۱۵ (درس ۱۵-۵) فقط معرفی مختصری داشتیم، با جزئیات کامل بررسی کنیم: scale (تغییر اندازه)، rotate (چرخش) و skew (کج کردن).

scale(): تغییر اندازه با یک ضریب

.box {
  transform: scale(1.5);
}

scale()1 یعنی اندازه اصلی (بدون تغییر)، اعداد بزرگ‌تر از 1 یعنی بزرگ‌نمایی، و اعداد بین 0 و 1 یعنی کوچک‌نمایی. در این مثال، عنصر، ۱.۵ برابر بزرگ‌تر از حالت عادی نمایش داده می‌شه.

scaleX() و scaleY(): کنترل مستقل هر محور

.a { transform: scaleX(2); }
.b { transform: scaleY(0.5); }
.c { transform: scale(2, 0.5); }

scaleX() فقط عرض، و scaleY() فقط ارتفاع رو، مستقل از هم، تغییر می‌دن. تابع scale()، وقتی دو مقدار بگیره (مثل مثال سوم)، معادل نوشتن scaleX() و scaleY() پشت‌سرهمه؛ در این حالت، عرض دو برابر و ارتفاع نصف می‌شه، که نتیجه‌ش، یک کشیدگی نامتقارن (نه یک بزرگ‌نمایی یکنواخت) است.

مقادیر منفی در scale(): آینه کردن (Mirroring)

.mirrored {
  transform: scaleX(-1);
}

یک کاربرد جالب و کمتر شناخته‌شده: مقدار منفی در scale()، عنصر رو، حول همون محور، آینه (Mirror) می‌کنه؛ یعنی scaleX(-1)، تصویر رو، دقیقاً مثل یک آینه افقی، برعکس نشون می‌ده. این تکنیک، بدون نیاز به یک نسخه دوم از تصویر، برای ساخت جلوه‌های تقارنی کاربرد داره.

rotate(): چرخش حول مرکز

.box {
  transform: rotate(45deg);
}

همون‌طور که در فصل ۱۵ دیدیم، rotate()، عنصر رو، با واحدهای زاویه (از فصل ۶)، می‌چرخونه؛ به‌طور پیش‌فرض، این چرخش، حول مرکز عنصر اتفاق می‌افته (این نقطه مرکزی، با Property به اسم transform-origin، که در درس بعدی همین فصل بررسیش می‌کنیم، قابل‌تغییره).

مقادیر مثبت و منفی در rotate()

.clockwise { transform: rotate(90deg); }
.counter-clockwise { transform: rotate(-90deg); }

مقدار مثبت، چرخش رو، در جهت عقربه‌های ساعت انجام می‌ده؛ مقدار منفی، در خلاف جهت عقربه‌های ساعت.

skew(): کج کردن یا اریب‌سازی

.box {
  transform: skewX(20deg);
}

skewX()، عنصر رو، در محور افقی، اریب می‌کنه؛ یعنی گوشه‌های بالا و پایین یک مستطیل، به‌جای هم‌راستا بودن با هم، نسبت به هم، جابه‌جا می‌شن و شکل، به یک متوازی‌الاضلاع تبدیل می‌شه.

skewY(): کج کردن عمودی

.box {
  transform: skewY(10deg);
}

skewY()

skew(): هر دو محور، هم‌زمان

.box {
  transform: skew(15deg, 5deg);
}

تابع skew()، دو مقدار می‌گیره (اول X، بعد Y)؛ اگه فقط یک مقدار بدیم، اون مقدار، فقط به محور X اعمال می‌شه (معادل skewX() تنها).

یک کاربرد رایج: جلوه بصری کارت‌های اریب در طراحی مدرن

.hero-banner {
  transform: skewY(-3deg);
}

.hero-banner__content {
  transform: skewY(3deg); /* اصلاح مجدد محتوای داخلی */
}

یک تکنیک رایج در طراحی‌های مدرن، اریب کردن جزئی یک بخش بزرگ از صفحه (مثل یک بنر)، برای ایجاد حس دینامیک و غیرمعمول. نکته مهم اینجاست: چون skew، محتوای داخلی رو هم اریب می‌کنه، معمولاً باید محتوای داخلی، با یک skew معکوس (در این مثال، skewY(3deg) در برابر skewY(-3deg) والد)، دوباره «صاف» بشه تا متن و تصاویر داخلش، خودشون کج به‌نظر نرسن.

ترکیب چند تابع: ترتیب اهمیت دارد

.a {
  transform: rotate(45deg) scale(1.5);
}

.b {
  transform: scale(1.5) rotate(45deg);
}

همون‌طور که در فصل ۱۵ اشاره کردیم، وقتی چند تابع Transform، پشت‌سرهم نوشته بشن، ترتیبشون مهمه؛ چون هر تابع، روی نتیجه تابع قبلی، اعمال می‌شه. در مثال .a، اول چرخش، بعد مقیاس؛ در .b، برعکس. برای scale و rotate ساده روی یک عنصر، این تفاوت، معمولاً در نتیجه بصری نهایی محسوس نیست (چون مرکز چرخش و مقیاس، یکسان می‌مونه)، ولی وقتی translate هم وارد ترکیب بشه (که در ادامه فصل می‌بینیم)، این ترتیب، تأثیر بسیار محسوسی روی نتیجه نهایی می‌ذاره.

جدول جمع‌بندی این سه خانواده

خانواده عملکرد واحد ورودی
scale / scaleX / scaleY بزرگ یا کوچک کردن (ضریب) عدد بدون واحد
rotate چرخش حول مرکز (پیش‌فرض) واحد زاویه (deg)
skew / skewX / skewY اریب کردن واحد زاویه (deg)

یک مثال ترکیبی کامل: دکمه با چند جلوه هم‌زمان در Hover

.icon-button {
  transform: scale(1) rotate(0deg);
  transition: transform 0.2s ease-out;
}

.icon-button:hover {
  transform: scale(1.1) rotate(15deg);
}

در این مثال، هنگام Hover، آیکون، هم‌زمان کمی بزرگ‌تر می‌شه و کمی می‌چرخه؛ چون هر دو تابع، در یک transform واحد نوشته شدن، این دو جلوه، هم‌زمان و به‌صورت یکپارچه، طی همون یک Transition، اجرا می‌شن.

نکات مهم

  • مقادیر منفی در scale، عنصر را حول همان محور، آینه (Mirror) می‌کنند.
  • rotate، به‌طور پیش‌فرض، حول مرکز عنصر می‌چرخد؛ این نقطه، با transform-origin قابل‌تغییر است.
  • وقتی محتوای داخل یک عنصر با skew اریب شده، معمولاً باید با یک skew معکوس روی خود محتوا، دوباره صاف شود.

اشتباهات رایج

  • قاطی کردن scaleX/scaleY با translateX/translateY؛ اولی اندازه را تغییر می‌دهد، دومی موقعیت را جابه‌جا می‌کند.
  • فراموش کردن این‌که ترتیب چند تابع Transform پشت‌سرهم، مخصوصاً وقتی translate هم در ترکیب باشد، روی نتیجه نهایی اثر می‌گذارد.
  • استفاده از skew روی یک عنصر حاوی محتوای متنی، بدون اصلاح مجدد آن محتوا با یک skew معکوس.

جمع‌بندی

scale (با scaleX و scaleY)، اندازه یک عنصر را با یک ضریب تغییر می‌دهد و مقادیر منفی آن، جلوه آینه‌ای می‌سازند. rotate، عنصر را با واحد زاویه، معمولاً حول مرکزش، می‌چرخاند. skew (با skewX و skewY)، عنصر را به یک شکل اریب‌شده تبدیل می‌کند و معمولاً نیاز به اصلاح مجدد محتوای داخلی با یک skew معکوس دارد. ترکیب این توابع، در یک transform واحد، امکان ساخت جلوه‌های بصری چندلایه و هماهنگ را فراهم می‌کند.