Take the 2-minute tour ×

I'm creating something akin to a 3D map, where I need to be able to zoom into certain elements whilst making use of CSS3 3D transforms. I have worked out that you can quite simply use the untransformed 2D coordinates to do this, if you apply the translate before any rotation.

My issue now is getting the untransformed 2D properties of an element so that I can move the 'camera' to focus and zoom onto said element.

I have tried to store the original properties before I apply the 3D transformation, but this is unreliable and hacky, as it does not account for viewport changes, and sometimes will give odd numbers as if the parent container was much smaller:

var contentChildren = $("#content3d").children().each(function(index, element){
    $(this).attr("flatleft", $(this).position().left);
    $(this).attr("flattop", $(this).position().top);
    $(this).attr("flatwidth", $(this).width());
    $(this).attr("flatheight", $(this).height());

So, how can I get the untransformed properties of an element being 3D transformed?

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

You can try using the .data function in jquery, its pretty straight forward and pretty reliable as far as i know.

$(this).data("flatleft", $(this).position().left);

ref: http://api.jquery.com/data/

share|improve this answer
When I said it was unreliable, I meant that it does not account for viewport changes, and on occasion, outright saves illogical numbers. I should have made this clear, sorry. –  Ruirize Nov 1 '12 at 10:10
That is incredibly odd, have you tried cloning the elements before transform and taking the data straight from the original source? –  roacher Nov 1 '12 at 12:24
No - I have since decided to explicitly define the position data outside of DOM, however I am leaving the question open. –  Ruirize Nov 1 '12 at 12:33
add comment

Your Answer


