Transform Origin

📌 مفهوم

کلاس‌های origin برای تعیین نقطه مرجع تغییرات Transform (Scale, Rotate, Skew) استفاده میشن.

در CSS معادلش:

transform-origin: top left; /* یا center, bottom right و ... */

📑 سینتکس کلی

origin-{position}
origin-{x}-{y}

  • origin → تعیین نقطه مبنا

  • {position} → top, bottom, left, right, center

  • {x}-{y} → مختصات ترکیبی

📑 کلاس‌های پیش‌فرض

کلاسمقدار CSS
origin-centertransform-origin: center;
origin-toptransform-origin: top;
origin-top-righttransform-origin: top right;
origin-righttransform-origin: right;
origin-bottom-righttransform-origin: bottom right;
origin-bottomtransform-origin: bottom;
origin-bottom-lefttransform-origin: bottom left;
origin-lefttransform-origin: left;
origin-top-lefttransform-origin: top left;

📌 مثال ساده

<div class="w-32 h-32 bg-blue-500 transform rotate-45 origin-top-left"></div>

📌 این مربع حول گوشه بالا سمت چپ میچرخه.

📌 ترکیب با Hover و Animation

<button class="px-6 py-3 bg-purple-600 text-white rounded-lg transform transition duration-500 origin-bottom-right hover:rotate-12">
  Rotate Me
</button>

📌 روی هاور: دکمه حول گوشه پایین سمت راست میچرخه.

📌 نکته حرفه‌ای

  • تغییر transform-origin مخصوصا وقتی با Rotate یا Scale کار میکنی، اثرات بصری خیلی متفاوتی میده.

  • می‌تونی از ترکیبات origin-x-y برای کنترل دقیق‌تر مرکز Transform استفاده کنی.