Javascript 如何镜像此动画？

我在屏幕的左侧有一个面板，激活时会翻转。当您移动鼠标时，它会稍微改变rotateY变换以获得良好的交互效果。我想在屏幕的右侧镜像这个，但是每次调整都会导致面板在你移动鼠标的时候变形

需要对第二个jquery函数进行哪些调整以反映效果？我尝试了很多东西，包括用x=360-x+15替换x=x+15的当前代码。很接近，但仍然不对

$document.on'mousemove'，'viewport1.menu'，函数事件{ var x=Math.roundevent.pageX/$this.width*10； x=x+15； $this.css'transform'，'rotateY'+x+'deg'； }; $document.on'mousemove'，'viewport2.menu'，函数事件{ var x=Math.roundevent.pageX/$this.width*10； x=360-x+15；//这几乎是正确的，但并不完全正确。。。 $this.css'transform'，'rotateY'+x+'deg'； }; .视口{ 透视图：1000px； 位置：绝对位置； 顶部：0；底部：0；宽度：30%； 填充物：5px； } .菜单{ 文本对齐：居中； 宽度：100%； 边框：1px纯黑； 显示：内联块； 身高：100%； } 视口1{ 左：0； } 视口1.菜单{ 透视原点：左； 变换原点：左； 变换：旋转15度； } 视口2{ 文本对齐：右对齐； 右：0； } viewport2.菜单{ 透视原点：右； 变换原点：右； 变换：旋转345度； } 让我停下来！ 让我停下来！ 您正在使用event.pageX（鼠标指针相对于文档左边缘的位置）来计算文档的旋转。您需要减去左偏移：$this.offset.left。之后，将x+15更改为x-15，即可获得镜像效果

$document.on'mousemove'，'viewport1.menu'，函数事件{ var x=Math.roundevent.pageX/$this.width*10； x=x+15； $this.css'transform'，'rotateY'+x+'deg'； }; $document.on'mousemove'，'viewport2.menu'，函数事件{ var x=Math.roundevent.pageX-$this.offset.left/$this.width*10； x=x-15； $this.css'transform'，'rotateY'+x+'deg'； }; .视口{ 透视图：1000px； 位置：绝对位置； 顶部：0；底部：0；宽度：30%； 填充物：5px； } .菜单{ 宽度：100%； 边框：1px纯黑； 显示：内联块； 身高：100%； } 视口1{ 左：0； } 视口1.菜单{ 透视原点：左； 变换原点：左； 变换：旋转15度； } 视口2{ 文本对齐：右对齐； 右：0； } viewport2.菜单{ 透视原点：右； 变换原点：右； 变换：旋转345度； }

---

欢迎来到StackOverflow，我花了20分钟删除了所有依赖于项目的内容，以便在这里可以重现，尽管我相信这可能是一个简单的数学问题，有知识的人可以在不看示例的情况下快速解决。