CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionS
There are various techniques for getting around this bug :• Apply a 1-pixel white border around the element.• Apply webkit-backface-visibility: hidden; to the element.• Add another transformation to the element, such as -webkit-transform:
rotate(−10deg) translateZ(0);.There is no single technique that best addresses the rendering bug in all circumstances, however;
the effectiveness of each technique depends on the context of the element being rendered.
Scale
The scale transform is something of an oddity when applied to images: given that changing an image’s height
and width will have much the same visual result, it might not seem useful. The difference is that scale can be
applied to any HTML element: changing the width of a paragraph will reflow the text content, but altering its
scale will make the text physically larger or smaller.
The value for scale is a multiplier: scale(2) applied to an element will make it appear twice as wide and
twice as high (in other words, four times its normal size), while scale (.5) will result in an image that is one-fourth
Figure 2-4. Zoomed image, showing aliasing of edges on an image rotated with CSS transform