While working on a CSS3 tool we bumped into a nasty little bug with CSS3 3D Transforms. This bug is seen when two planes intersect.
When two planes intersect they should be “clipped”. This means that parts of the faces become invisible – as if the two faces were going through each-other. Unfortunately this is broken in Mozilla Firefox and Google Chrome. Apple gets it right with Safari on their desktop and their iOS devices.
Track the bug
Try the Code
You can test this code out now using the live demo by clinking on the link below. Try using Firefox, Chrome or Safari and see the difference in the output.
3D Transform Plane Clipping Bug – Live Demo