توابع Transform

توابعی برای جابه‌جایی، چرخش و تغییر شکل: توابع Transform

در این درس، با خانواده توابعی آشنا می‌شیم که همگی، به‌عنوان مقدار Property به اسم transform استفاده می‌شن. جزئیات کامل مفهومی این Property (تفاوت با Positioning، Transform Origin، حالت‌های ۲بعدی و ۳بعدی) رو، به‌طور مستقل، در فصل Transforms بررسی می‌کنیم؛ این درس، فقط یک معرفی از خود توابع، در ادامه فصل توابع CSS، است.

Property به اسم transform: نقطه شروع

.box {
  transform: translateX(20px);
}

Property به اسم transform، یک یا چند تابع تبدیل رو می‌پذیره که، بدون تأثیر روی Layout واقعی صفحه (برخلاف Propertyهایی مثل margin یا top)، ظاهر بصری یک عنصر رو، جابه‌جا، بزرگ/کوچک، یا می‌چرخونه.

translate(): جابه‌جایی

.a { transform: translateX(50px); }
.b { transform: translateY(-20px); }
.c { transform: translate(50px, -20px); }

خانواده translate، عنصر رو، بدون تأثیر روی جریان چیدمان، جابه‌جا می‌کنه: translateX() فقط افقی، translateY() فقط عمودی، و translate()، هر دو محور رو، با دو مقدار جداگانه (اول X، بعد Y)، هم‌زمان.

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

.a { transform: scale(1.5); }
.b { transform: scaleX(2); }
.c { transform: scale(1.2, 0.8); }

خانواده scale، اندازه بصری عنصر رو، با یک ضریب، بزرگ یا کوچک می‌کنه؛ scale(1.5) یعنی «۱.۵ برابر بزرگ‌تر»، و scale(0.5) یعنی «نصف اندازه اصلی». می‌شه محورها رو هم مستقل کنترل کرد (scaleX، scaleY)، یا با دو مقدار جدا در scale().

rotate(): چرخش

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

تابع rotate()، عنصر رو، حول مرکزش (به‌طور پیش‌فرض)، می‌چرخونه؛ مقدارش، با واحدهای زاویه که در فصل ۶ دیدیم (معمولاً deg)، مشخص می‌شه.

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

.a { transform: skewX(15deg); }
.b { transform: skew(10deg, 5deg); }

خانواده skew، عنصر رو، در یک یا هر دو محور، اریب می‌کنه؛ یعنی گوشه‌های مستطیل، به‌جای زاویه ۹۰ درجه، به یک شکل موازی‌الاضلاع کج‌شده تبدیل می‌شن.

ترکیب چند تابع در یک خط

.box {
  transform: translateX(20px) rotate(10deg) scale(1.1);
}

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

یک کاربرد بسیار رایج: وسط‌چین کردن دقیق با translate

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

این الگو، دقیقاً همون تکنیکی‌ست که در فصل ۱۰ (درس ۱۰-۴) بهش اشاره کردیم؛ top: 50% و left: 50% فقط گوشه بالا-چپ عنصر رو وسط می‌برن، ولی translate(-50%, -50%)، عنصر رو، به‌اندازه نصف ابعاد خودش (نه والدش)، به عقب می‌کشه؛ نتیجه، وسط‌چین شدن کاملاً دقیق (هم افقی، هم عمودی) عنصره، صرف‌نظر از اندازه واقعیش.

matrix(): تابع فشرده برای ترکیب چند تبدیل

.box {
  transform: matrix(1, 0, 0, 1, 20, 10);
}

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

جدول جمع‌بندی توابع اصلی

تابع	عملکرد
translate() / translateX() / translateY()	جابه‌جایی، بدون تأثیر روی Layout
scale() / scaleX() / scaleY()	بزرگ یا کوچک کردن
rotate()	چرخش حول یک نقطه (پیش‌فرض: مرکز)
skew() / skewX() / skewY()	اریب کردن در یک یا هر دو محور
matrix()	ترکیب فشرده و ریاضی چند تبدیل

چرا transform روی Layout اثر نمی‌گذارد؟

یک نکته مهم که مستقیماً به فصل‌های Performance و Positioning مرتبطه: تغییر transform، برخلاف تغییر width، margin یا top/left، باعث محاسبه مجدد Layout نمی‌شه؛ مرورگر، فقط لایه بصری همون عنصر رو، مستقیماً جابه‌جا یا تغییر شکل می‌ده. همین ویژگی، transform رو، برای انیمیشن‌های روان و کم‌هزینه، در فصل‌های Transitions و Animations، به یکی از بهترین انتخاب‌ها تبدیل می‌کنه.

نکات مهم

• توابع transform، ظاهر بصری عنصر را جابه‌جا، بزرگ/کوچک یا می‌چرخانند، بدون تأثیر روی فضای واقعی آن در Layout.
• می‌توان چند تابع را با فاصله (نه کاما) پشت‌سرهم نوشت؛ ترتیب نوشتن، روی نتیجه نهایی اثر می‌گذارد.
• translate(-50%, -50%)، ترکیب‌شده با top/left: 50% و position: absolute، رایج‌ترین روش وسط‌چین کردن دقیق است.

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

• جدا کردن چند تابع transform با کاما، به‌جای فاصله، که باعث نامعتبر شدن مقدار می‌شود.
• فراموش کردن این‌که ترتیب توابع در یک زنجیره transform، روی نتیجه نهایی اثر می‌گذارد.
• استفاده از margin یا top/left برای انیمیشن‌های مکرر، به‌جای transform که هزینه محاسباتی کمتری دارد.

جمع‌بندی

توابع Transform، شامل translate (جابه‌جایی)، scale (تغییر اندازه)، rotate (چرخش)، skew (اریب کردن) و matrix (ترکیب فشرده ریاضی)، همگی به‌عنوان مقدار Property به اسم transform استفاده می‌شوند و ظاهر بصری یک عنصر را، بدون تأثیر روی جریان چیدمان واقعی، تغییر می‌دهند. جزئیات کامل‌تر این مفاهیم، از جمله Transform Origin و حالت سه‌بعدی، در فصل اختصاصی Transforms بررسی خواهد شد.