CSS позиционирование прямоугольника после поворота с помощью матрицы преобразования

Question

Я использую матрицу преобразования CSS, чтобы повернуть div. После применения поворота я хочу поместить div, используя css 'left' и 'top'.

Проблема в том, что позиционирование css игнорирует поворот и обрабатывает прямоугольник, как будто он не вращается. Например, если я поворачиваю прямоугольник на 90 град, а затем устанавливаю его влево 0px и top 0px, он не будет отображаться в верхнем левом углу контейнера. Это будет тот же результат, как если бы я поместил исходный прямоугольник в 0,0 и только потом повернул его (он будет выглядеть как 10px, -5px или около того).

Все ответы онлайн говорят только о том, чтобы получить положение вращающегося прямоугольника, но не устанавливать.

Спасибо.

Answer 1

Невозможно расположить div после поворота.

Что вы можете сделать, это положение угла, который вы действительно хотите, а затем установите это положение в качестве центра вращения.

Если вы дадите конкретный пример, я могу дать вам более подробный ответ.

Answer 2

В конце концов я решил его с простой логикой:

newX = x - (originalWidth - boundedW)/2; 
newY = y - (originalHeight - boundedH)/2;