css3 transformed element not firing events onClick


//edit my brain was in a knot. Everything works as it should, this question is false and obsolete

If I rotateY an Element and try to click on the element, which has a bound eventListener (onClick), the event will not fire (hovering is also off). If I remove the transformation, the event fires as expected. I know, that by doing a transform, the element only appears at a different location, but "actually is still at its original position". But it seems idiotic to let one transform an element, but kill all its eventListeners..? Any direction I should dig into?

Problem courtesy of: japrescott


Not sure if you're using raw JavaScript or jQuery, but I have no problem:

div {
width: 50px;
Background: blue;
-WebKit-transform:rotate(45deg) translate(100px, 100px);



Maybe you can post your code? It could be something else that's giving you trouble.

Solution courtesy of: henryaaron


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.