Javascript 平移3d后获取divs位置

在Javascript中，当我使用gpu通过translate3d方法移动元素时，元素样式的左位置根本不会改变。因为cpu甚至没有意识到发生了任何运动

---

通过translate3d移动元素后，如何跟踪元素的新位置？

如果不手动设置，则“样式”属性“左”将设置为“自动”。但是您应该能够使用jquery函数position（）

用于获取元素坐标

下面是一个从CSS3翻译（动画）元素检索

.left

Rect属性的小示例：

const-box=document.getElementById（'box'）；
const printer=document.getElementById（'printer'）；
常量printBoxRectLeft=（）=>{
printer.textContent=box.getBoundingClientRect（）.left；
requestAnimationFrame（printBoxRectLeft）；
};
printBoxRectLeft（）
#框{
宽度：30px；高度：30px；背景：红色；
动画：动画3s无限交替；
}
@关键帧animX{to{transform:translateX（300px）；}}
其他使用
getBoundingClientRect
的答案也有效，但如果您想从
translate3d
字符串中获取实际数值，请使用
RegExp
：

var xyzArray;
let translate3dValue = 'translate3d(256px, 512px, 0px)';
xyzArray = translate3dValue.replace(/translate3d|px|\(|\)/gi, '').split(',');

在那把小提琴里，我把rotateY转换成了translate3d（330px，0,0），是的。。它似乎确实起作用了。因此，至少有一种方法，如果有一种不使用jquery的方法会更好。您不需要使用jquery，
getBoundingClientRect
可以为您提供当前元素位置，甚至可以通过CSS3转换。平滑解决方案。从没听说过这个功能，谢谢。我用它做很多事情，但没想到这会结束翻译的噩梦@不幸的是，这只适用于填充窗口宽度的元素，封装在更多其他元素中的转换元素显示不同的
getBoundingClientRect
值。也许我们应该使用元素的offsetLeft值进行调整？当我使用
el.getBoundingClientRect（）.left-el.offsetLeft-el.parentNode.offsetLeft进行快速测试时，
这在更复杂的结构中变得更加准确。@manikanta在我的脖子后面。。。如果您对相对于视口的位置不感兴趣，但对可滚动父元素的位置不感兴趣，则可能需要包含其他变量。。。
var xyzArray;
let translate3dValue = 'translate3d(256px, 512px, 0px)';
xyzArray = translate3dValue.replace(/translate3d|px|\(|\)/gi, '').split(',');