Rotate Images with CSS

For an actual project I had a difficult quest. Images should be placed dynamically on a page and also should be dynamically rotated with different angels for different places. First I thought it would be the only solution to create new pictures with PHP, but than I found the information on how to rotate images with CSS.

The following code defines a CSS class for a rotated image:

.rotated{
  transform:rotate(5deg);
  -ms-transform:rotate(5deg); /* IE 9 */
  -moz-transform:rotate(5deg); /* Firefox */
  -webkit-transform:rotate(5deg); /* Safari and Chrome */
  -o-transform:rotate(5deg);
}

For this example the picture is rotated by 5 degrees. If you want to rotate the image counter clockwise you can use also negative degrees (for example -5). As you can see, you need special functionality for different browsers.