How to Apply CSS3 Transforms to Background Images

0
0
views

Updated version of article published on September 27, 2012. Updates include latest data on current browser support, removing unnecessary vendor prefixes from code samples, and addition of live demo on CodePen. Scaling, skewing and rotating any element is possible with the CSS3 transform property. It’s supported in all modern browsers without vendor prefixes. If you need to support Blackberry Browser and UC Browser for Android, you’ll need to use the -webkit- prefix, e.g. [code language=”css”] #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg); } [/code] Great stuff. However, this rotates the whole element — its content, border and background image. What if…
How to Apply CSS3 Transforms to Background Images