How to get the position of element transformed with css rotate How to get the position of element transformed with css rotate javascript javascript

How to get the position of element transformed with css rotate


Per your current Question and your requested confirmation of:

var x = termin.top + Math.cos(angle) * div.height;var y = div.left + Math.sin(angle) * div.height;

The solution can be found in this other SO Answer for a different question, enhanced here:

// return an object with full width/height (including borders), top/bottom coordinatesvar getPositionData = function(el) {    return $.extend({        width: el.outerWidth(false),        height: el.outerHeight(false)    }, el.offset());};// get rotated dimensions   var transformedDimensions = function(el, angle) {    var dimensions = getPositionData(el);    return {        width: dimensions.width + Math.ceil(dimensions.width * Math.cos(angle)),        height: dimensions.height + Math.ceil(dimensions.height * Math.cos(angle))    };};


Here's an interactive jsFiddle that provides real-time updates for getPositionData(); function.
You'll be able to see the top and left values at the end of the CSS3 Rotation process you control.

Reference:   jsFiddle

Status Update: The above jsFiddle works great for 0-90deg and can be approved upon for all angles and different units such as rad, grad, and turn.


Try using element.getBoundingClientRect()

According to MDN:

Starting in Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0) , the effect of CSS transforms is considered when computing the element's bounding rectangle.