CSSPLAY

CSS DEMOS › CSS play - Image Rotation

Date : 9th May 2011

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

Information

Whilst browsing the web recently I came across this demonstration using javascript to cycle through a set of images to give the impression of rotation and thought it would be a challenge to produce something similar using just CSS and html. So here it is.

The code uses only one 'classname' and no 'ids', all the element handling is done using CSS selectors 'nth-of-type' and the general sibling selector. Though not as 'swish' as the javascript version it does give a reasonable rotation and amazingly works in IE9.

This also enabled me to get to grips with the 'nth of type' selector which can be a little confusing at first sight.

Tested and working in IE9, Firefox, Opera, Safari and Chrome.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.