درود، وقتتون بخیر.

در 

transform-origin: 20px 50px;

عدد اول (20px): مربوط به موقعیت افقی (X-axis) هست.

این عدد مشخص می‌کنه که نقطه مرجع از لبه چپ عنصر چند پیکسل فاصله داره

اگر مقدار مثبت بدید، نقطه مرجع به سمت راست حرکت می‌کنه. اگر منفی بدید، نقطه مرجع به سمت چپ (خارج از عنصر) می‌ره.

عدد دوم (50px): مربوط به موقعیت عمودی (Y-axis) هست.

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

<div class="box"></div>

و استایلش این هست:

.box {
  width: 100px;
  height: 100px;
  background: coral;
  transform-origin: 20px 50px; /* نقطه مرجع تغییر */
  transform: rotate(45deg);   /* بچرخ */
}

نقطه مرجع (محور چرخش) از لبه چپ مربع 20px به سمت راست حرکت می‌کنه.
نقطه مرجع از لبه بالای مربع 50px به سمت پایین حرکت می‌کنه.
حالا هر تغییری مثل rotate از این نقطه مرجع شروع می‌شه.
برای درک بهتر می‌تونید یه دایره کوچک روی نقطه مرجع بذارید. این کارو با یه ::after انجام بدید:

.box {
  position: relative;
  width: 100px;
  height: 100px;
  background: coral;
  transform-origin: 20px 50px;
  transform: rotate(45deg);
}
.box::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: red;
  top: 50px; /* محور Y */
  left: 20px; /* محور X */
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

حالا یه نقطه قرمز دارید که دقیقاً نشون می‌ده نقطه مرجع کجاست و تغییرات چطور اعمال می‌شن.

خانوم پاشائی عزیز با اینکه خیلی خوب شرح دادین باز با تغییر مقادیر x و y برام  سمت و جهت اون نقطه قرمز قابل پیش بینی نیس :(