如何忽略3D变换并获得元素的真实中心？

Question

在父div上使用滚动时，我想模拟子元素围绕3d圆的旋转。我使用的逻辑是计算父母与孩子中心之间的距离，然后计算元素应绕Y轴旋转多少度。

这是我到目前为止尝试过的方法，但是似乎获得 Children 元素的中心并没有返回实际值，因为它们具有透视效果。忽略透视的影响时，如何获得儿童的真正中心。您可能会注意到，右侧元素的变形速度比左侧元素快：

function getCenter(element) {
    let x = element.offset().left + element.outerWidth()/2;
    return x;
}

$(document).ready(function(){
	
	$(".wrapper").scroll(function(){
		var totalWidth=$(this).width();
		var holder=$(this);
		var d;
		$(this).find(".child").each(function(){
			d=-1* (getCenter($(this))-getCenter(holder));
			$(this).css({"transform": "rotateY("+ d*120/totalWidth +"deg)"});
			
			if (d<0){
				$(this).css({"transform-origin": "0 0"});
			}
			else{
				$(this).css({"transform-origin": "100% 0"});
			}
		})
	})
})

.wrapper{
  width:100%;
  overflow-x:scroll;
  height:100px;
  white-space:nowrap;
  height:140px;
 }
 
 .child{
  width:45%;
  background:url('https://bersoft.com/bimagem/help/chessboardsmall.jpg');
  border:5px solid #ff8800;
  margin-right:10px;
  height:100px;
  display:inline-block;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>