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!
I love you guys!!!
Awesome effect, great work and it degrades nicely in Firefox too.
Awesome !!!
@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??
Great effect. Keep up the excellent work.
Doesn’t work on Firefox 7.0.1. Works on chrome, perfect job.
Haha you guys are amazing.
Cool effect!
Absolutely ridiculous. Love it……
Super
OMG, but not for FF, in Safari and chrome it´s look very nice. Nice work!!!!!
beautiful image :)
i have chrome , but when i press the icon i see the brown background??
all of your other effects in the website work?? update????
Nice effect. I m gr8 fan of ur site…
..:)
Its not getting minimized to small on MAC Chrome :(
On safari on mac when you click on bullets don’t make animation. Nice work… like always
Very pleasant effect, the best congratulations.
@Pedror: with degrades, I meant that it didn’t break or anything like that in FF. Just the the big photo as fallback.
finally managed to see the effect in Safari, because in Opera, FF and Chrome i had no chance. is looking very good.