3D CSS transform, jagged edges in Firefox

Solution 1:

Edited answer: (after comments)

"Workaround", add a transparent outline attribute:

outline: 1px solid transparent;

Tested on Firefox 10.0.2 Windows 7: http://jsfiddle.net/nKhr8/

Original answer: (background-color dependent)

"Workaround", add a border attribute with the same color of your background (white this case):

border: 1px solid white;

Tested on Firefox 10.0.2 Windows 7: http://jsfiddle.net/LPEfC/

Solution 2:

If you want to prevent anti-aliased border

Below worked better for me

border: 1px solid rgba(0, 0, 0, 0.1); 

if the border should be clearly visible, this might not be the perfect solution though, in which you'd better stick to @Juan's answer.

Below is a taken screenshot of the cube turning

Solution 3:

Apart from using outline, the following works as well:

box-shadow: 0 0 0 1px transparent;