Как выставить transform-origin равным центру окна браузера?

Question

[Михаил]

Всем привет!
Подскажите, пожалуйста,
Как выставить transform-origin элемента равным центру окна браузера?
Т.е. сам элемент,который вращается, будет передвигаться по экрану по осям x y
Но центр его вращения чтобы был всегда в центре окна браузера

Comments

[Ankhena]

transform-origin указывается относительно элемента, поэтому в такой формулировке - никак.
Если элемент сначала выставить в центр окна, а потом вращать, то, возможно, получится. Но без кода и макета кто ш его знает.

[Михаил]

Ankhena,
есть такой пример, но там возможно много лишнего , поэтому я его не стал сначала выкладывать, чтобы не запутать еще больше.
Там есть красная точка в центре экрана.
И есть wrapper, который вращается. У него transform-origin 50% 50%.
И я думаю, как можно привязать его transform-origin к координатам этой точки-центра....
Если конечно это вообще возможно

https://codepen.io/mk3mk/pen/gObYzvm?editors=0110

[Ankhena]

Михаил,

#wrapper{
  position: absolute;
  top: calc(50% - 200px);
  left: calc(50% - 200px);

...

}

[Михаил]

Ankhena,
да, wrapper встал в центр, хорошо!
теперь я добавил функцию смещения wrapper'a кнопками вверх и вниз
и с помощью этих кнопок он смещается, и при этом меняется его положение и одновременно transform-origin.
например при нажатии вверх вот так
wrapper.style = 'top: calc(40% - 200px);transform-origin: 50% 60%;';
а при нажатии вниз вот так
wrapper.style = 'top: calc(50% - 200px);transform-origin: 50% 50%;';
но как-то оно немного коряво получается, вот не знаю, может надо как-то по-другому сделать?

[Ankhena]

Михаил, давайте подробнее:
Координаты позиционирования top, left и т.д. считаются от родителя (того, который ближайший не static).
Координаты у transform считаются от самого элемента.
Поэтому top: 10% и translateY(10%) сместят элемент на разные значения.
А значит, их нужно пересчитывать через px.

[Михаил]

Ankhena, понял, спасибо! попробую

[Михаил]

посмотрите, если не сложно еще раз этот пример, пойдёт так ?
оно мне кажется лучше действует
https://codepen.io/mk3mk/pen/NWPKeva?editors=0010
я там ввел переменную ed равную 100px.
let ed = 100 + 'px';
и потом смещения выполняю через эту переменную
wrapper.style = `top: calc(50% - 200px + ${ed});transform-origin: calc(50%) calc(50% - ${ed});`;