Question

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?

Answer 1

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/