Question

I am trying to create an application which consists of a map in perspective to which I can add map markers (absolutely positioned DIV’s) however I think I’m getting into a bit of mess with transformations/3D space.

Taking the fiddle referenced below as an example, I would expect DIV 1 to be at position 0,0 (which it is when laid flat – click the button) however in it’s upright position there is a small margin on the left (this seems to be controlled by the perspective value so I’m guessing I need to compensate for this somehow?).

Equally Div2 appears to be in the correct position at the far extremes of the canvas, however if I change the top/left value to 100,100 it is hidden below the canvas – do I need to raise the markers position with an additional transform in the ?? axis? If so, why isnt this a problem for Div one which sits on top of the canvas?

http://jsfiddle.net/vEWEL/9/

Answer 1

You can adjust where the transform originates using the -webkit-transform-origin property (and the other prefixes). I couldn’t quite work out what value to use, but it should help. Try setting it to bottom to see how it works.