Perfectly Rotate and Mask Thumbnails With CSS3

Image galleries with rotated thumbnails are somewhat infrequent, but it’s a simple trick to add style to your webpage. However, if not done right, achieving and maintaining this effect can sometimes prove to be a major hassle! To properly achieve this effect, your first thoughts might turn to creating rotated thumbnails in Photoshop. However, this can prove to be difficult in the long term.

Before creating your thumbnails, Jim Nielsen needs to determine how large each thumbnail will appear on screen. If our thumbnails are too small and he rotates them at too much of an angle, some of the corners will give him an empty space. Hence, to properly fill the mask area, he can conclude that the more our thumbnail is rotated the larger it will have to be. In mathematical terms, as the rotation angle of the thumbnail increases, so too must the thumbnail’s size.