CSS transform-origin не работает с translate () - PullRequest
Новая
       28

CSS transform-origin не работает с translate ()

0 голосов
/ 20 декабря 2018

Я хочу переместить div из его центральной точки, но кажется, что translate() не волнует, что такое transform-origin, и использует верхнюю левую точку элемента для его перемещения.

Здесьэто тест для подтверждения: 

<div class="items" style="">
  <div class="item-1" style="width: 100px; height: 100px; background: blue; position: absolute; opacity: 0.5; transform-origin: 0% 0%; transform: translate(100px, 100px)"></div>
  <div class="item-2" style="width: 100px; height: 100px; background: red;  position: absolute; opacity: 0.5; transform-origin: 100% 100%; transform: translate(100px, 100px)"></div>
</div>

Как видите, элементы бота перекрываются, а это не так.

Вопрос: Как расположить элемент, используя его центральную точку?

Примечание. Поскольку я вращаю и перемещаю эти элементы с помощью JS, просто вычитать половину ширины / высоты элемента невозможно, поскольку для этого нужна математика, которую я не знаю.

...