HTML5 Wrong Mouse Coordinate with transform rotation DIV

[aminux]

I want to make a game, when you click on target, the DIV append an image in it,

When i click on the face, you can see that the DIV append a bullet image, which is good. but when you click on the right arm, the position of the bullet is wrong. it's because the arm is transform: rotate(25deg); with CSS3.

this is my screenshot http://i.imgur.com/oZ5VnD6.png

How can i determine the right position of the bullets when i click on the arm ?

thank you

[kuuuurija]

Simplest solution would be create a separate div for "Bullets", have higher z-index and append the bullets there.

[aminux]

Thank you for your help.

 

My real question is not how to put the bullet, i put them with append jquery, but the position left and top are wrong.

so, if i use a div for bullets what will be the good positions left and top

 

as you can see in my example, when you click on the face, it works perfectly, but when you click on the right arm, it make the bullet in wrong position.

because i put the bullet in a rotating Div. this is my screenshot http://i.imgur.com/oZ5VnD6.png

 

 

is there something that i have to calculate, for getting the good positions, like sinus or cosinus things ?

 

Thank you 

[ericjbasti]

 Here is a modified version of what I do in my engine.

var rotatedXY = function(obj) {	var x = obj.x;	var y = obj.y;	var sin = Math.sin(obj._parent.angle);	var cos = Math.cos(obj._parent.angle);	obj._orbitX = (x * cos) - (y * sin);	obj._orbitY = (x * sin) + (y * cos);}

Something like the  obj._orbitX, obj._orbitY values are what your looking for.

[ultimatematchthree]

	obj._orbitX = (x * cos) - (y * sin);	obj._orbitY = (x * sin) + (y * cos);

Just to add to this, if you're wondering where this formula came from, look up 2D rotation matrices. If you want to be able to deal with arbitrary transforms (taking scale, skew, etc. into consideration) it might be instructive to look at the source code for the globalToLocal method of the DisplayObject class of EaselJS.