Jump to content

Calculate new Top position of Element after CSS Rotate

Don E

Recommended Posts



I am trying to understand the following code that's in the link below as to how to calculate the new Top position of an element that's been rotated with CSS..


Please see this link to get a better picture of what I am referring to: http://jsfiddle.net/Y8d6k/


I can't seem to find where in the code, mostly jQuery(not too familiar) the actual caculation is taking place?


This is where I got the jsfiddle link form: http://stackoverflow.com/questions/11229040/how-to-get-the-position-of-element-transformed-with-css-rotate


Thank you in advance!

Link to comment
Share on other sites



The getPositionData is a function to store an element data of its dimension and offset.


A function has been added to #slider so when #slider value has changed, it will get a value and then set the rotation CSS with this value as angle. It will also get the rotated element new data with getPositionData() and display the data (top, left and slider value).


The last lines are to store first (original) element's data and display the data.


Personally I think the script is too complex (?) could be more simpler. Does it "calculate" the new position? when the element rotated, does it just display the new top value with elem.top?


the elem.top is to show element distance from the top limit of the page. and as for the 'position', the calculation should start with parametric equation to find element's corner (x,y) coordinate?

Edited by musicman
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...