如何在JavaScript中获得css3翻译后元素的位置？ [英] How do I get the position of an element after css3 translation in JavaScript?

问题描述

我看到这张贴在2种不同的形式在stackoverflow，但解决方案不适合我。

I saw this posted in 2 different forms on stackoverflow, but the solutions don't work for me.

本质上，我有一个项目，我将翻译。当我做一个obj.style.left或obj.offsetLeft，在元素已经被翻译后，我得到0.有没有反正我可以得到一个元素的坐标/位置已经被翻译css3？

Essentially, I have an item that I will translate. When I do a obj.style.left or obj.offsetLeft, after the element has been translated, I get 0. Is there anyway I can get the coordinates/position of an element after it has been translated with css3?

我不能使用jQuery（因为我不能，也因为我想了解解决方案，而不仅仅是使用库而不理解下面发生的事情）

I can't use jQuery (because I can't and also because I want to understand the solution, not just use the library without understanding what is happening underneath)

任何想法？

非常感谢！

推荐答案

确定，请紧紧抓住，因为这不太好：

Ok, hold tight because this is not nice:

window.addEventListener('load', function(){
  var node = document.getElementById("yourid");
  var curTransform = new   WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
  console.log(node.offsetLeft + curTransform.m41); //real offset left
  console.log(node.offsetTop + curTransform.m42); //real offset top
});

您可以在这里玩：

http://jsfiddle.net/duopixel/wzZ5R/

这篇关于如何在JavaScript中获得css3翻译后元素的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！