A 3D animated cube gallery where the current image rotates 90 degrees to the right and the new image rotates 90 degrees from the left even when you click on a thumbnail image that is not directly after the current image.
The code for this is very simple and just comprises a form with 10 inputs and associated labels and 10 images.
The stylesheet is also very small although it does make full use of nth-of-type and nth-last-of-type expressions.
This demo works in all the latest browser versions except Opera which does not yet support 3D transforms. The animaton is a little jerky in Firefox but smooth in Chrome, Safari and IE10.
20th January 2013
Code and stylesheet simplified even further to remove the need for nth-of-type and nth-last-of-type expressions and replace with input:checked and input:not(:checked).
All photographs are copyright © stu nicholls.
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
This demonstration can be used subject to the following terms and conditions.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.