PhotoFlipper.js – 3D flip your photo/gallery

I added another item to my github, a 3D css image rotator/randomizer.

https://github.com/jkat98/PhotoFlipper

A generic JavaScript function that will create a randomly timed image “flipper”. The image container will flip in 3D and be replaced with a new random image from a sheet. CSS Transitions and Transforms are used when supported with a graceful fallback to regular jQuery fades if not.

Images must be stored in a horizontal sprite, with each image the exact same dimensions. So, for example, a sprite containing 10 images that are 100×100 will be 100 pixels tall by 1000 pixels wide with the 10 images alinged horizontally (no space between images).  Here is a sample image sheet.

Usage:

[sourcecode lang=”javascript”]

var myflip = new PhotoFlipper({

sel: ‘#galleryFlipper1’,

width: 100,

height: 100,

photos: ‘/url/to/photos_sprite.jpg’,

count: ‘8’

//optional parameters:

//delaymin: 5, //delay in seconds to start of flip

//delaymax: 20 //max random amount of time to flip to another

});

[/sourcecode]

Necessary CSS:

[sourcecode lang=”css”]

.flip-container { -moz-perspective: 1000; -ms-perspective: 1000; -webkit-perspective: 1000; perspective: 1000; }

.flip-container.hover .flipper { -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

.flipper { position: relative; }

.flip-container .flipper { -moz-transition: 0.6s; -o-transition: 0.6s; -webkit-transition: 0.6s; transition: 0.6s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }

.front, .back { position: absolute; top: 0; left: 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }

.front { z-index: 2; }

.flip-container .front, .flip-container .back { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; }

.flip-container .back { -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }

[/sourcecode]

HTML:

[sourcecode lang=”html”]

[/sourcecode]

*Note: jQuery is required.

You can see a working sample of this in action here: http://www.nextgenugm.com – scroll down to the photos section (right above Client Event).  After the page loads it waits a few seconds before starting a random flipping gallery.