Fullscreen Image 3D Effect with CSS3 and jQuery

Today we want to share one of our CSS 3D Transforms experiments with you. The idea is to show an image’s fullscreen version by rotating two blocks in three-dimensional space. The faces of the blocks being rotated to the front will show the fullscreen image.

Please note that you can only see the cool 3d effect in a browser that supports those CSS3 properties (currently Chrome and Safari).

You can check out the video of the effect here: http://www.screenr.com/Onls

We’ll be using Modernizr in order to know if the browser supports the used CSS3 properties. For the ones that don’t we’ll use a simple fallback.

The images used in the demo are by Jeeheon. They are licensed under the Attribution 2.0 Generic (CC BY 2.0) License.

How it works

In our little experiment, we’ll add out images to a wrapper with the class fd-wrapper:
HTML

<div id="fd-wrapper" class="fd-wrapper">
	<img src="images/medium/1.jpg" data-bgimg="images/large/1.jpg" alt="image01" title="Love Will Tear Us Apart" />
	<img src="images/medium/2.jpg" data-bgimg="images/large/2.jpg" alt="image02" title="Just Can't Get Enough" />
	<img src="images/medium/3.jpg" data-bgimg="images/large/3.jpg" alt="image03" title="In a Manner of Speaking" />
	<img src="images/medium/4.jpg" data-bgimg="images/large/4.jpg" alt="image04" title="Guns of Brixton" />
	<img src="images/medium/5.jpg" data-bgimg="images/large/5.jpg" alt="image05" title="This Is Not a Love Song" />
	<img src="images/medium/6.jpg" data-bgimg="images/large/6.jpg" alt="image06" title="Making Plans for Nigel" />
</div>

The information about the fullscreen image’s path will be in the data-bgimg attribute.
We’ll use the images in an HTML structure that we define in a jQuery template. That structure will consist of two boxes, an upper and a lower one, each having six faces of which the frontal ones are shown initially.

When we click on the icon to show the fullscreen image, the upper rectangle will rotate up, revealing its bottom face, while the lower box will rotate down, showing us its top face. The bottom face of the upper rectangle will have the upper part of the fullscreen image as a background image and the top face of the lower rectangle will have the lower part of it:

Options

There are the following default options:

current		: 0,			
// index of current image

width		: 600,			
// image's width

height		: 400,			
// image's height

perspective	: 550,			
// the webkit-perspective value

speed		: 750,			
// rotation transition speed

easing		: 'ease-in-out',
// rotation transition easing 	

onLoad		: function() { return false; } 
// fired when the slideshow is initialized

Don’t forget to check out the video of the effect here if your browser doesn’t support the CSS3 properties: http://www.screenr.com/Onls

We hope you like our little experiment and find it inspiring!