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

your JSFiddle works for me on Chrome 20... when I click red or green rectangle, they both react on that click — Zathrus Writer, Aug 22 '12 at 11:04
wow, interestingly enough, when I reopened that same page, it stopped working :D — Zathrus Writer, Aug 22 '12 at 11:05
when I wrapped your live() bindings by $(document).ready() and updated that negative transformation to -43px from the original -50px, it always works - perhaps you can try to work out from that point on? — Zathrus Writer, Aug 22 '12 at 11:11
wow, so it doesn't work again when I forked that JS and tried to share it, it's back to not-working, sry — Zathrus Writer, Aug 22 '12 at 11:13

score 4 · Accepted Answer · answered Aug 25 '12 at 09:49

4

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/

answered Aug 25 '12 at 09:49

woot

3,671
4
26
39

1

This needs to be marked as the answer. Exactly what I was needing to fix my transform in Chrome and Safari. – iamface Sep 24 '14 at 16:55

Make 3d-translated element clickable

1 Answers1