Problema de transformación de Chrome CSS: el elemento delante del elemento rotado no responde bien al estilo y los clics
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).
Violín de demostración: http://jsfiddle.net/antishok/QWNyT/8/
El problema: 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?
Gracias por su atención.
preguntado el 25 de agosto de 12 a las 23:08
antishok
1 Respuestas
If you take a look in Safari you will see that the black div actually goes through the green div, like this:
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 );
Respondido 26 ago 12, 11:08
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas google-chrome css css-transforms or haz tu propia pregunta.