:hover works only on lower part of rotateX transfo

Question

I have div with CSS rotateX transform applied to it:

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

and a bunch of smaller div's floated in it, with :hover rule applied to them. The problem is that only half of inner divs react to :hover event.

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

Answer 1

if you remove in css height: 200px all block will react hover event