CSSplay - 3D Animated Cube Gallery
19th January 2013
For IE10, Firefox, Safari, Chrome, iPad, iPhone, iPod Touch and Mac Safari/Firefox etc.
20th January 2013 - Code and Stylesheet simplified even further
photos & slideshow copyright © stu nicholls - CSS play
Information
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.
Copyright
You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
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.
