I'm having a problem with getting the position of a div after rotate
filter is applied to it. I have the position of one end, its height, and the angle by which it is rotated, but after checking what this filter actually does on MDN ("[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]") I still don't know how to crack it.
Example :
The div I'm interested in is the dashed line. Its styling at that moment was :
left: 80px; top: 12px; height: 69.5122px; width: 2px; -moz-transform: rotate(-1.21366rad);
(top
/left
describe the position of its beginning.) I'm trying to get the top
/left
position of its end.
The transform CSS property lets you rotate, scale, skew, or translate an element.
The CSS rotate() function lets you rotate an element on a 2D axis. The rotate() function accepts one argument: the angle at which you want to rotate your web element. You can rotate an element clockwise or counter-clockwise.
The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.
We can add the following to a particular tag in CSS: -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);
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 coordinates var 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With