CODEWITHSUNDEEP
google-chromecsscss-transforms
antishok
antishok

Reputation: 2910

chrome css-transform issue: element in front of rotated element doesn't respond well to styling & clicks

I have one green div that is rotated with:

-webkit-transform: perspective( 600px ) rotateY( -45deg )

and in front of it there is a black div with cursor:pointer (and it also alerts on click).

Demo fiddle: http://jsfiddle.net/antishok/QWNyT/8/

The problem: In chrome (but not in FF) when moving the mouse cursor along the black div, there is a whole area in which the cursor goes back to default (and click events aren't triggered). Without the rotation of the div behind, there is no such issue.

Can I do something about it? Is this a known bug?

Thank you.

Upvotes: 2

Views: 1219

Answers (1)

methodofaction
methodofaction

Reputation: 72405

If you take a look in Safari you will see that the black div actually goes through the green div, like this:

enter image description here

So, looking at your intention, it seems that Chrome gets the hit area right, but both Firefox and Chrome are rendering it wrong.

What you need to do is push the green div further behind in 3d space, you can achieve this with...

-webkit-transform: translateZ( -200px ) perspective( 600px ) rotateY( -45deg );
-moz-transform: translateZ( -200px ) perspective( 600px ) rotateY( -45deg );

Upvotes: 3

Related Questions