Make 3d-translated element clickable

Question

I have two divs inside a wrapper-div. The first one is positioned in front of the wrapper via translate3d(50px, 50px, 50px), the second is positioned behind the wrapper via translate3d(50px, 50px, -50px).

I want to bind click-events to the inner-divs but i can't click the div which is positioned behind the wrapper. Does anybody know a solution for this problem?

js-fiddle (webkit only): http://jsfiddle.net/rttmax/zrgdQ/16/

thanks. rttmax

Answer 1

You have to give your wrapper DIV a positive 50px Z value in order to compensate for the negative 50px.

http://jsfiddle.net/zrgdQ/108/