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.