javascript - 如何在同一对象上使用 javascript 独立控制 translateX 和 translateY（无范围输入）？

Question

我正在尝试使用 onclick 事件通过变换/翻译来控制对象位置。问题是当我更新 translateX 时，它会覆盖 translateY，反之亦然。有没有办法分别控制它们？我读过一些关于 CSS 变量的东西，但不知道如何使它工作。拜托，如果有人可以帮助我，我会很高兴！谢谢！

function moveX() {
  document.getElementById("myDIV").style.transform = "translateX(100px)";
}
function moveY() {
  document.getElementById("myDIV").style.transform = "translateY(100px)";
}

标签： javascriptcss

Answer 1

试试这个，它肯定会工作

document.getElementById("myDIV").style.transform = "translate(20%,100%)";