-webkit-transform rotate - Pixelated images in Chrome

Question

Using -webkit-transform: rotate(-5deg); on a container div, Chrome renders the grid of images with really jagged edges. Whereas in FF (-moz-transform:

Answer 1

This won't be appropriate for all uses, but where you have control over the markup and don't mind adding an extra

, you can make use of generated content to dramatically clean up the edges of rotated images in Chrome. This works because Chrome will apply anti-aliasing to the generated content placed over the image.

You can see an example here: http://jsfiddle.net/cherryflavourpez/2SKQW/2/

The first image has nothing done to it, the second has a border applied to match the background colour - not any difference that I can see.

The third image div has some generated content with a border placed around the edge. You lose a pixel around the edge, but it looks much better. The CSS is pretty self-explanatory. This has the advantage of not requiring you to create the border in your image, which seems like too big a price to me.

0 讨论(0)

查看其它9个回答

发布评论:

提交评论

---

•  加载中...