Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get the position of element transformed with css rotate

Tags:

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 :

enter image description here

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.

like image 1000
sasklacz Avatar asked Jun 27 '12 14:06

sasklacz


People also ask

Can I use CSS transform rotate?

The transform CSS property lets you rotate, scale, skew, or translate an element.

How do you rotate an element in CSS?

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.

Which CSS transform property value rotates an element a specified number of degrees clockwise or counter-clockwise?

The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.

How do I rotate a Div 90 degrees?

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


1 Answers

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.

like image 99
arttronics Avatar answered Oct 12 '22 11:10

arttronics