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.
FullscreenImage3dEffect

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

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:

Fullscreen Image 3d Effect

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!

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 36

Comments are closed.
  1. @Ralph this awessome animation works in your FF?? what version.

    I use the last one 7.0.1 and it doesnt similar to chrome. Can anyone confirm that??

  2. i have chrome , but when i press the icon i see the brown background??

    all of your other effects in the website work?? update????

  3. On safari on mac when you click on bullets don’t make animation. Nice work… like always

  4. @Pedror: with degrades, I meant that it didn’t break or anything like that in FF. Just the the big photo as fallback.

  5. finally managed to see the effect in Safari, because in Opera, FF and Chrome i had no chance. is looking very good.