How to fix these jagged lines?


Tags: javascript,css,antialiasing

Problem :

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.


    CSS Howto..

    How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over is?

    How do I make this sticky footer stick to the bottom of the layout when the sidebar exceeds screenheight?

    How to Add flexibility to SASS for another color

    newbie css/php question - how to get a div between a label and an input with cakephp

    In css how to display multiple divs?

    How to style nested panel controls in ASP.NET

    How to add objects in a DIV and appear above the DIV

    How to get the navigation bar to align to the center

    How to create this CSS border

    how to simulate mouse hover on image in css

    How to stop the queuing of multiple animations based on occurrence jquery

    How to make div elements inside a div background image responsive using css

    How to make CSS scroll panel for custom purposes?

    CSS: How to accomplish a div which is blurred at the edges?

    how to edit the width of menu bar in dreamweaver

    How to blink a text on button in IE ,chrome etc using JQuery or CSS

    How to remove css from DOM

    How do I show specific images from a get_children array in WordPress

    How to use easeOutBounce animiation on display block?

    How to set width of a
    in CSS to X number of pixels less than the width:auto?

    In CSS, how can I make a div as high as the entire page?

    How can I base one CSS setting on another?

    How can I create a nav bar with a repeat image inside?

    How to hide grey scrollbars on a DIV in Android - they only show when you cannot scroll

    how to align divs with different width within another parent div?

    How to add a simple card flip animation?

    How to avoid CSS interference in an HTML page

    how to have the text under the logo css

    CSS - How do I float one element to the right inside the other div?

    How do you close the CSS preview view in Eclipse?