Elements inside the face of a 3d css cube cannot be selected. Strange
I am creating a 3d css cube menu. The code is here .
<button id="btn">flip button</button> <div class="signup-viewport"> <div id="cube" class="cube animation"> <div class="front">front <a href="">front link</a></div> <div class="back">Back</div> <div class="left">Left</div> <div class="right">Right <a href="">right link</a></div> <div class="bottom">Bottom</div> <div class="top">Top</div> </div> </div> When the face is flipped with the minimize button, the link on the right side of the cube cannot be clicked.
Any ideas why? In firefox, the link works, but not for chrome and chrome.
After a very big fight, I finally managed without any problems with the possibility of clicks and choices.
To make it possible to select the sides of a cube, the property "perspective" (like @Cedric Reichenbach) is required; but as a side effect, pixelation occurs due to perspective rendering. I tried to get rid of pixalation using a large number of perspectives (10000px), but the visualization was still there. Thus, increasing the perspective number, the rendering plane z will be “far away”, giving a view less perspective.
After two days of experimenting with all kinds of things, as I cheated, the prospect was to use an extremely large amount for the prospect. ( perspective: 10000000px; ) Now the pixelization effect has disappeared, and the sides of the cube are available for click and selection.
Here is a demonstration of the solution.
This is because your surfaces had a height of 0 , as a result of which the text was displayed in the fill area. Firefox and Chrome seem to handle these elements differently in terms of mouse events.
If you use height: auto , it works as expected, but you must make sure that the height is maintained in accordance with the change in content.
This shows your modified JSFiddle .
Update:
It seems chrome behaves differently in different OS (or versions).
However, the problem seems to be related to the three-dimensional nature of your transforms ( transform-style: preserve-3D ). When setting up a clear perspective, it works on my machine, although it is still a little shaky.
You may also notice that now everything looks a bit vague, as 3D transforms “detach” the content from the pixel grid, actually lifting the planes closer to the viewer.