HTML|CSS: почему при transform: rotate(180deg) translateY(50%) эемент смещается относительно центра по оси X?

Question

[MyQuestion]

Добрый вечер!

Опишу два состояния.
1:

.price-tables__item .price-tables__title::after {
    right: 10px;
    top: 50%;
    transform: rotate(0) translateY(-50%);
  }

  .price-tables__item.opened .price-tables__title::after {
    transform: rotate(180deg) translateY(50%);
  }

Псевдоэлемент относительно своего центра слева смещается по оси X смещается. Т.е. делает оборот вокруг точки одной из своих сторон и когда делает rotate, элемент занимает правильную позицию. В итоге получается ломаная анимация, которую я совсем не ожидал увидеть.

2:

.price-tables__item .price-tables__title::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 17px;

  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center;
  transition: transform 0.3s linear;
  transform: rotate(0);
}

.price-tables__item.opened .price-tables__title::after {
  transform: rotate(180deg);
}

Тут всё отлично отрабатывает, без смещения, но при этом, я не могу позиционировать псевдо элемент по центру.

Почему так происходит? Чего-то я тут не понимаю ) Где-то рядом ответ, но не как не соображу.

Пока писал, придумал решение без позиционирования, но хочется понять, что я не так делал, когда позиционировал элемент абсолютно ?

Comments

[imko]

Потому что оси поворачиваются

[MyQuestion]

imko, а как тогда делать анимацию элемента и выравнивать его по центру в абсолютном позиционирование? Сейчас я решил отказаться от абсолютного позиционирования и просто раскидать элементы с помощью флексов и выровнил всё по центру. Есть решение с абсолютным позиционированием?

Я сначала принял Ваш ответ за стёб, но потом понял, что именно это я и не осознавал до конца. Вроде очевидно, что оси естественно поворачиваются... но я почему-то думал, что раз делаю выравнивание на 50% (по центру), то и находиться должен в центре ординат, а не смещаться к её вершине.

[imko]

MyQuestion, в обратном порядке напиши) Сначала сдвиг потом поворот)