使用translateX导致transform-origin旋转轴偏移的技术问题咨询

使用translateX时，transform-origin指定的旋转轴会从top center偏移为top right。所有容器的尺寸与子元素完全一致。

CSS 代码 #

#arrow {
    position: absolute;

    left: 50%;
    bottom: 0;

    transform-origin: top center;
    transform: rotate(0deg) translateX(-50%);
}

HTML 代码 #

<div id="depth">
   <img id="sensorImg" src="https://cdn.discordapp.com/attachments/282502094202732544/1000456309793116170/Depth_Flattened.svg" alt="depth">    
   <img id="arrow" src="https://cdn.discordapp.com/attachments/282502094202732544/1000670507890389062/Polygon.png"> 
</div>

内容的提问来源于stack exchange，提问作者HasanTheSyrian_