Search code examples
javascriptcssantialiasing

How to fix these jagged lines?

I want to know is there a way around to fix these jagged lines (edges of a div). I used CSS perspective and rotate to give my tiles block (shown in the image below) a 3d click effect just as happens in Windows 8 Start Menu Tiles.

Rotating the divs onclick causes these jagged lines to appear which is very bad to me and my tiles. Is there a way around this to minimize these jagged lines by any means, CSS, JS, anything?

UPDATE:
I am providing a JSFiddle demo below to help you get an idea on exactly how I created my tiles and gave them a 3d look. http://jsfiddle.net/1hz5hk5s/

This problem is with Firefox only.

Solution

  • This website (http://demosthenes.info/blog/689/More-Tricks-and-Tips-For-CSS-3D-Smoothing-Transforms-amp-Fixing-Floated-Elements) seems to offer a relevant solution of adding a border of 1px. So the relevant CSS would be:

    img:focus{transform: rotateY(12deg); outline: 1px solid transparent;}

    This should make the image rotate 12 degrees on the y-axis on click. However, browser prefixes should be added just to make sure that it is cross compatible as each browser handles the rotations differently.