Javascript 旋转父元素时，translateZ元素仍然看起来平坦

我在div上有一个“悬停时旋转”的效果，我想让它在旋转时，里面的元素看起来更接近于观看者，并且相对于背景有更多的深度。但是，应用

translateZ（）使它们看起来更大，但它们仍然看起来“卡在”背景上

到目前为止，我尝试应用
透视图
和
转换：透视图（）父元素的属性和
变换样式：preserve-3d
指向子元素，但它看起来仍然粘在背景上

所以说清楚一点

但是


let gridElements=document.getElementsByClassName（'grid-member'）；
让magify=（容器，内部，调整）=>{
//老鼠
变量鼠标={
_x:0,，
_y:0，
x:0,，
y:0，
updatePosition:函数（事件）{
var e=事件| | window.event；
this.x=e.clientX-this.\u x；
this.y=（e.clientY-this._y）*-1；
},
setOrigin:函数（e）{
此._x=e.offsetLeft+数学楼层（e.offsetWidth/2）；
这个._y=e.offsetTop+Math.floor（e.offsetHeight/2）；
},
显示：函数（）{
返回“（“+this.x+”，“+this.y+”）”；
},
};
//跟踪鼠标相对于容器中心的位置。
鼠标.setOrigin（容器）；
//----------------------------------------------------
var计数器=0；
var刷新率=3；
var=update=函数（）{
返回计数器+++%refreshRate===0；
};
//----------------------------------------------------
var onMouseEnterHandler=函数（事件）{
container.style.zIndex='3'；
更新（事件）；
};
var onMouseLeaveHandler=函数（）{
container.style.transform=''；
//inner.children[1].style.transform=''；
container.style.zIndex=''；
};
var onMouseMoveHandler=函数（事件）{
如果（更新（））{
更新（事件）；
}
};
//----------------------------------------------------
变量更新=函数（e）{
//设置乘数
var yMult=0.03；
var xMult=0.063；
var d=文件，
bd=d.getElementsByTagName（'body'）[0]，
win=窗口；
var bdst=$（window.scrollTop（）；
var bdsl=bd.left；
var pageX=e.pageX；
var pageY=e.pageY；
var offset=internal.getBoundingClientRect（）；
var w=inner.clientWidth | | | inner.offsetWidth | | inner.scrollWidth；
var h=inner.clientHeight | | | inner.offsetHeight | | inner.scrollHeight；
var wMultiple=320/w；
var offsetX=0.52-（pageX-offsets.left-bdsl）/w；
var offsetY=0.52-（pageY-offsets.top-bdst）/h；
var dy=pageY-offsets.top-bdst-h/2；
var dx=pageX-偏移量。左侧-bdsl-w/2；
变量yRotate=（偏移量x-dx）*（yMult*wMultiple）；
变量xRotate=（dy-偏移量）*（xMult*wMultiple）；
var-imgCSS；
imgCSS=
“透视图”（“透视图”）+
w*3+
'px）rotateX（'+
X旋转*1+
'deg）rotateY（'+
酪酸盐*1+
‘deg’；
//var innerCSS='rotateX（'+xRotate*0.2+'deg）rotateY（'+yRotate*0.35+'deg）translateZ（30px）'；
//internal.children[1].style.transform=innerCSS；
container.style.transform=imgCSS；
};
var updateTransformStyle=函数（x，y）{
变量样式='rotateX（'+x+'deg）rotateY（'+y+'deg）'；
container.style.transform=样式；
container.style.webkitttransform=样式；
container.style.mozTranform=样式；
container.style.msTransform=style；
container.style.oTransform=样式；
};
//--------------------------------------------------------
container.onmousemove=onMouseMoveHandler；
container.onmouseleave=onMouseLeaveHandler；
container.onmouseinter=onmouseinterhandler；
};
magify（gridElements[0]，gridElements[0]。子项[0]，0.5）
正文{
背景：黑色；
显示器：flex；
证明内容：中心；
}
#容器{
显示器：flex；
柔性包装：包装；
宽度：1500px；
保证金：自动；
}
#容器>分区{
高度：300px；
宽度：300px；
背景：红色；
透视图：30px；
透视原点：中心；
显示器：flex；
证明内容：中心；
对齐项目：居中；
对齐内容：居中对齐；
背景：url（'https://i.picsum.photos/id/1018/3914/2935.jpg');
背景尺寸：封面；
背景重复：无重复；
}
#容器>分区>分区{
变换：translateZ（20px）；
变换样式：保留-3d；
}
#容器>分区p{
颜色：白色；
字体系列：“蒙特塞拉特”，无衬线；
字号：800；
显示：块；
}

同侧眼睑

我已经用
translate（）完成了


let gridElements=document.getElementsByClassName（'grid-member'）；
var textContainer=document.querySelector（“#text”）；
让magify=（容器，内部，调整）=>{
//老鼠
变量鼠标={
_x:0,，
_y:0，
x:0,，
y:0，
updatePosition:函数（事件）{
var e=事件| | window.event；
this.x=e.clientX-this.\u x；
this.y=（e.clientY-this._y）*-1；
},
setOrigin:函数（e）{
此._x=e.offsetLeft+数学楼层（e.offsetWidth/2）；
这个._y=e.offsetTop+Math.floor（e.offsetHeight/2）；
},
显示：函数（）{
返回“（“+this.x+”，“+this.y+”）”；
},
};
//跟踪鼠标相对于容器中心的位置。