In the not so distant past, we were learning about revolutionary techniques to save HTTP Request and KBs alike through the use of image sprites. These sprites consisted of tens or even hundreds of icons arranged in an image file that was later spliced and served in a variety of ways throughout a website.
We’ve made good use of the technique, and virtually every site concerned with scalability employs it.
Thanks to the advent of CSS3’s Transform and Transition properties, we can take this a step further, and using a few concise lines of code, transform base icon templates into new icons for future use – and even throw animation into the mix for an added bonus!
The technique is as simple and intuitive as was image sprites, and allows use to rapidly deploy new icons without ever having to alter the image sprites.