: hovering only works on bottom of rotateX converted div

I have a div with CSS rotateX transform applied to it:

-webkit-transform: perspective(500px)  rotateX(60deg) rotateY(60deg) ;

and a bunch of smaller divs placed in it using the hover rule. The problem is that only half of the inner divs respond to the event: hover.

JsFiddle: http://jsfiddle.net/fNxgn/4/