Transform Origin

نقطه‌ای که همه‌چیز حولش می‌چرخه

تا الان هر وقت یه المنت رو چرخوندیم یا بزرگ کردیم، احتمالاً بدون این‌که توجه کنید، این اتفاق همیشه از یه نقطه‌ی مشخص شروع شده: دقیقاً از وسط المنت. اما این نقطه ثابت و اجباری نیست؛ می‌شه تغییرش داد. همین موضوع، یعنی transform-origin، موضوع این درسه.

transform-origin دقیقاً چیه؟

هر وقت از rotate، scale یا skew استفاده می‌کنید، مرورگر باید بدونه این تبدیل حول کدوم نقطه انجام بشه. این نقطه رو «مبدأ تبدیل» یا transform origin می‌گن. مقدار پیش‌فرضش center یا همون 50% 50% هست؛ یعنی دقیقاً وسط جعبه‌ی المنت.

.box {
  transform-origin: 50% 50%; /* مقدار پیش‌فرض */
}

برای این‌که فرقش رو حس کنید، این دو تا رو با هم مقایسه کنید:

.box-1 {
  transform-origin: center; /* پیش‌فرض */
  transform: rotate(45deg);
}

.box-2 {
  transform-origin: top left;
  transform: rotate(45deg);
}

box-1 حول مرکز خودش می‌چرخه و سرجاش می‌مونه. اما box-2 انگار از گوشه‌ی بالا-چپش «آویزونه» و کل جعبه حول همون گوشه می‌چرخه و به سمت پایین-راست پرت می‌شه. همین یه تغییر کوچیک، کاملاً حس حرکت رو عوض می‌کنه.

مقادیر قابل قبول

می‌تونید مبدأ رو به چند شکل مشخص کنید:

ترتیب نوشتن مقادیر همیشه اول محور X بعد محور Y هست. یعنی transform-origin: 20px 40px; یعنی مبدأ ۲۰ پیکسل از چپ و ۴۰ پیکسل از بالای جعبه فاصله داره.

مبدأ سه‌بعدی: اضافه شدن محور Z

وقتی با ترنسفورم‌های 3D کار می‌کنید (که تو درس قبل دیدیم)، می‌تونید یه مقدار سوم هم به transform-origin اضافه کنید که مربوط به محور Z هست:

.cube-face {
  transform-origin: 50% 50% -100px;
}

این مقدار سوم معمولاً برای ساختن اشکال سه‌بعدی مثل مکعب کاربرد داره، جایی که هر وجه باید حول یه نقطه‌ی خاص تو عمق بچرخه تا شکل نهایی درست دربیاد.

کجا واقعاً به کارتون میاد؟

این ویژگی معمولاً تو حالت‌های خاص واقعاً نجات‌دهنده‌ست. مثلاً یه منوی همبرگری که وقتی باز می‌شه، دلتون می‌خواد از گوشه‌ی بالا-راست دکمه باز بشه، نه از وسط صفحه:

.menu-icon {
  transform-origin: top right;
  transition: transform 0.3s ease;
}

.menu-icon.active {
  transform: rotate(90deg) scale(1.1);
}

یا یه دکمه که با کلیک، از پایین بزرگ می‌شه انگار داره از زمین بلند می‌شه:

.btn {
  transform-origin: bottom center;
  transition: transform 0.2s ease;
}

.btn:active {
  transform: scale(0.9);
}

اشتباه رایج: فراموش کردن این‌که transform-origin به box خود المنت وابسته‌ست

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

جمع‌بندی

transform-origin تعیین می‌کنه چرخش، بزرگ‌نمایی یا کج شدن یک المنت دقیقاً از کدوم نقطه شروع بشه. مقدار پیش‌فرض همیشه وسط المنته، ولی با کلمات کلیدی، درصد یا واحدهای طول می‌شه هر نقطه‌ای رو انتخاب کرد، حتی نقطه‌ای بیرون از خود جعبه. این ویژگی خصوصاً برای منوها، دکمه‌ها و افکت‌های ریز UI که باید از یه گوشه‌ی خاص «باز» بشن، خیلی به‌کار میاد.