How to Get the Position of an Element After CSS3 Translation in JavaScript

How do I get the position of an element after css3 translation in JavaScript?

You can use getBoundingClientRect():

Imagine the following html block:

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

And the 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;
}

Now you can use the following javascript to get the correct position:

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

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

You can check the result in the jsfiddle:

I tested on FF, IE and chrome, and it worked on all my tests.

How to get the element position after css-translation

Apply :

var elmprop = getComputedStyle('idofelm', null);

Now you are able to get actual position of element and all other properties .

Like :

elmprop.backgroundColor,
elmprop.top,
elmprop.left,

=================================

Edit by Martin:
Thank you, now it works:

function getMaxPos() {
            var computetStyle = getComputedStyle(elm[0], null);
            var tx, ty;
            var transformOrigin =
                computetStyle.transformOrigin ||
                computetStyle.webkitTransformOrigin ||
                computetStyle.MozTransformOrigin ||
                computetStyle.msTransformOrigin ||
                computetStyle.OTransformOrigin;
            tx = Math.ceil(parseFloat(transformOrigin));
            ty = Math.ceil(parseFloat(transformOrigin.split(" ")[1]));
            return {
                max: {
                    x: tx + window.innerWidth - elm.prop('offsetWidth'),
                    y: ty + window.innerHeight - elm.prop('offsetHeight')
                },
                min: {
                    x: tx,
                    y: ty
                }
            };
        }

        function mousemove($event) {
            var x = startX + $event.clientX - initialMouseX;
            var y = startY + $event.clientY - initialMouseY;
            var limit = getMaxPos();
            x = (x < limit.max.x) ? ((x > limit.min.x) ? x : limit.min.x) : limit.max.x;
            y = (y < limit.max.y) ? ((y > limit.min.y) ? y : limit.min.y) : limit.max.y;
            elm.css({
                top: y + 'px',
                left: x + 'px'
            });
            getMaxPos();
            return false;
        }

How to catch current css translate() position in javascript

I think you need to call element.getBoundingClientRect()

let circle = document.querySelector(".animate");
let style = window.getComputedStyle(circle);

setInterval(() => {
  let rect = circle.getBoundingClientRect();
  console.log(rect.left)
}, 1000)

div {
  height: 100px;
  width: 100px;
  border-radius: 100px;
  background: blue;
}

.animate {
  animation: animate;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes animate {
  from {
    transform: translate(0)
  }
  to {
    transform: translate(calc(100vw - 120px))
  }
}

<div class="animate"> </div>

Element after translation goes back to origin place?

You are equalizing the position, to the current movement.

What you want is to add the movement (not absolute values) to the current position.

Remember: position = position + velocity.

You can also improve the behavior, by moving it just when clicking, to avoid it to get out of the screen and making undesired movements.

E.g.:

let m = document.getElementById("m");
let posX = 0;
let posY = 0;

let update = function(e) {
  posX += e.movementX;
  posY += e.movementY;

  m.style.transform = `translate(${posX}px, ${posY}px)`;
};

// Listen to movement when mousedown.
document.addEventListener("mousedown", () => {
  document.addEventListener("mousemove", update);
});

// Remove movement when mouseup.
document.addEventListener("mouseup", () => {
  document.removeEventListener("mousemove", update);
});

<svg id="m" width="40" height="40">
  <circle cx="20" cy="20" r="20" fill="red" stroke="red" stroke-width="1"/>
</svg>

Get divs position after translate3d

Use Element.getBoundingClientRect() to get the element coordinates

Here's just a small example that retrieves the .left Rect property from a CSS3 translated (animated) element:

const box = document.getElementById('box');const printer = document.getElementById('printer');const printBoxRectLeft = () => {  printer.textContent = box.getBoundingClientRect().left;  requestAnimationFrame(printBoxRectLeft);};
printBoxRectLeft();

#box{  width:30px; height:30px; background:red;  animation: animX 3s infinite alternate;}@keyframes animX { to{ transform:translateX(300px); }}

<div id="printer"></div><div id="box"></div>

---

Related Topics