css - CSS transform-origin 不适用于 translate()

Question

我想从它的中心点移动一个 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 旋转和移动这些项目，因此仅减去项目宽度/高度的一半不是一个选项，因为它需要我不知道的数学。

标签： csstransformcss-transforms