PhotoFlipper.js – 3D flip your photo/gallery

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

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.


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

Necessary 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); }


<div id="galleryFlipper1"></div>

*Note: jQuery is required.

You can see a working sample of this in action here: Р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.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s