CSSPLAY

CSS DEMOS › Flip card photo gallery

Date : 28th November 2013

For all modern browsers

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

Information

Now that Opera Developer 19.0 supports 3D animation we can make some progress with using these styles to produce a photo gallery using just CSS.

The above demo is based on a simple 3D flip card but adapted to allow for both portrait and landscape photos with captions.

Just click/tap the image to see it flip and rotate showing the image on the reverse. There are six images in this set, but the code and stylesheet can be adjusted to show more or less images.

Firefox is still a little jerky in its animation, but all other browsers are smooth.

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.