Comment obtenir la position d'un élément après la traduction de css3 en JavaScript?

Je l'ai vu affiché sous 2 formes différentes sur stackoverflow, mais les solutions ne fonctionnent pas pour moi.

Essentiellement, j'ai un objet que je vais traduire. Quand je fais un obj.style.de gauche ou de obj.offsetLeft, après que l'élément a été traduit, j'obtiens 0. Est-il de toute façon je peux obtenir les coordonnées de position/d'un élément, après qu'il a été traduit avec le css3?

Je ne peux pas utiliser jQuery (parce que je ne peux pas et aussi parce que je veux comprendre la solution, ne pas simplement utiliser la bibliothèque, sans comprendre ce qui se passe en-dessous)

Des idées?

Merci beaucoup!

source d'informationauteur ant

  1. 21

    Ok, accrochez-vous car ce n'est pas agréable:

    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
});

    Vous pouvez jouer avec elle ici:

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

  2. 29

    Vous pouvez utiliser getBoundingClientRect():

    Imaginer la suite de bloc html:

    <div class="centralizer popup">
    <div class="dragger"></div>
</div>

    Et le style:

    body {
    background:#ccc;
}
.centralizer {
    position:absolute;
    top:150px;
    left:170px;
    width:352px;
    height:180px;
    overflow:auto;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}
.popup {
    background:white;
    box-shadow:0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 15px rgba(0, 0, 0, 0.3);
    border-radius:3px;
}
.dragger {
    background:#eee;
    height:35px;
    border-radius:3px 3px 0 0;
    border-bottom:1px solid #ccc;
}

    Maintenant, vous pouvez utiliser le code javascript suivant pour obtenir la position correcte:

    var popup = document.querySelector('.popup');
var rect = popup.getBoundingClientRect();

console.log("popup.getBoundingClientRect(): \n" + "x: " + rect.left + "\ny: " + rect.top);

    Vous pouvez vérifier le résultat dans le jsfiddle:

    J'ai testé sur FF, IE et chrome, et il a travaillé sur tous mes tests.