Javascript 为什么document.getElementById（）.style.transform=“translateX（）”的“转换”只能转换一次？

我正在制作一个新的在线游戏。当我点击一个按钮时，我希望红方块在X轴上平移50像素。以下是HTML：

蛋糕单人2d冒险游戏 功能右移{ document.getElementByIdmaster-cube.style.transform=translateX50px； } 我知道图像将不会加载。如果向下滚动，您将找到一个Repl.it

以下是CSS：

html{margin:none；} 正文{边距：无；宽度：100vw；高度：100vh；} .arrow控件{float:右侧；页边距右侧：5px；页边距顶部：90%；页边距底部：10%；} 主立方体{背景颜色：FF0000；高度：40px；宽度：40px；} 如果您想查看Repl.it，请点击以下链接：

---

这是因为一旦设置元素，它就具有transform:translateX50px。它总是在那里，并且将它再次设置为相同的东西不会起任何作用

您必须将其设置为其他值，例如：

位移=50； 功能右移{ document.getElementByIdmaster-cube.style.transform=`translateX${displacement}px`； 位移+=50； } html{ 保证金：无； } 身体{ 保证金：无； 宽度：100vw； 高度：100vh； } .箭头控件{ 右边距：5px； 利润率最高：10%； 利润底部：10%； } 主立方体{ 背景色：FF0000； 高度：40px； 宽度：40px； }

---

变换是相对于元素的自然位置进行的。它不是增量的。如果你想这样做，你必须自己跟踪偏移量。@Pointy我怎样才能使它不相对于元素的自然位置？你不能。您必须计算代码中的累积偏移量，然后用它更新transform属性。@Pointy好的，谢谢您的帮助。谢谢。这行得通，但你能解释一下所有的功能吗？再次感谢。我试过那种方法，但我被卡住了。