تبدیل مکان مبدأ در CSS با transform-origin

در دنیای امروز طراحی وب، CSS یکی از پایه‌های اصلی در ساخت صفحات وب زیبا و کارآمده. اما وقتی حرف از انیمیشن و تغییرات بصری به میان می‌آید، یکی از ویژگی‌هایی که خیلی می‌تونه به ما کمک کنه ویژگی transform-origin هست که به ما کنترل بیشتری روی انیمیشن‌ها و تغییرات بصری می‌ده.

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

استفاده از transform-origin می‌تونه توی پروژه‌هایی که انیمیشن دارن واقعاً جالب باشه. این ویژگی معمولاً به همراه دیگر ویژگی‌های CSS مثل transform، rotate، scale و غیره به کار می‌ره تا تجربه کاربری جذاب‌تری ارائه بده. برای نمونه، می‌تونین یه تصویر رو با این ویژگی دور یه نقطه خاص بچرخونین که ظاهر زیباتری به ارمغان می‌آره.

حالا برای اینکه بهتر متوجه بشین، بیاین یه تیکه کد ببینیم:

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: rotate(45deg);
  transform-origin: top left;
}

در کد بالا:

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

این قدرت CSS هست که به ما اجازه می‌ده جزئیات انیمیشن‌ها و تحولات رو به نحوی تنظیم کنیم که تجربه یکتایی برای کاربر ایجاد کنه و از عناصری که معمولاً در حالت‌های ایستا دیده می‌شن ترکیب‌های جذابی بسازیم.