Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only. Check out the Photo Transitions at the Safari Technology Demos site, some of which we got inspired by.
The images used in the demo are by Joanna Kustra.
Please note that the 3D effects will only work in Webkit browsers. You can view a video of how the effects look here: Experimental CSS3 Animations for Image Transitions Video Demonstration
How it works
Given a set of images, we’ll add the first image to the wrapper with the class te-cover. With JavaScript we’ll control the transition classes given to the elements in the wrapper te-transition and which image will be shown. This is how the first example looks like:
<div id="te-wrapper" class="te-wrapper"> <div class="te-images"> <img src="images/1.jpg"/> <img src="images/2.jpg"/> <img src="images/3.jpg"/> <img src="images/4.jpg"/> <img src="images/5.jpg"/> </div> <div class="te-cover"> <img src="images/1.jpg"/> </div> <div class="te-transition"> <div class="te-card"> <div class="te-front"></div> <div class="te-back"></div> </div> </div> </div>
The main idea is to always show the regarding image using te-cover. When we start an animation by giving the respective animation class, the te-cover will get hidden while the animation runs. When the animation finishes, the te-cover element will be shown again, with the updated image.
Demos
Each demo will have a group of possible transitions that can be selected from the dropdown menu above the image.
We hope you like our little experiment and find it inspiring and useful!
Item Blur Effect with CSS3 and jQuery
Slopy Elements with CSS3
Pedro, I guess you already know though it doesn’t work in FireFox. Any fix make the other browsers behave?
@PEDRO BOTELHO awesome job mahn ! Thumbs up !
Marvelous Work Pedro
WELL DONE!!!!!!
@eric 23:42
yes, sure.. :)
and elderly who still use Internet Explorer 1 … :).
@Pedro
Sorry, i think there was a refresh problem with the website.
my apologies..
why experimental ? They are super awesome <3
Chrome and Firefox on Mac don’t handle it. The only place I could get it run is Safari.
So much in terms of Flash substitute :P
Superb!
Wow, really nice! I particularly like the cube effects.
‘the elderly, still using IE1′…pffft,
So we all halt progress, because some people are reluctant/unable to upgrade their computer software?
The worst argument for being unimpressed by new features is that they are not backward compatible. I remember designing sprites on a c64 in the 80′s, please don’t invent the internets coz my c64 cant connect to it….. Gimme a break.
Great work Pedro, keep it up.
Its working fine on Chrome but not working on Firefox 8?
Very nice, thank you. jquery smoothness on safari was getting me so annoyed, glad I found this.
awesome
but how i can use one selected option like example 7
and hide the select option from the page?
Amazing .. but if we do not have Chrome or Safari, don’t work..
Awesome, for 3D navigator :D
As always, awesome stuff!
How does this degrade in non webkit browsers?
Wow awesome !!!!
Hi,
Very awesome slider as always high quality.
But i have a question, how to i add a link without breaking the slider to a image.
Most of codrops sliders can handle links and would love to use this as a gallery chooser.
Greezt
cant feel it, didnt work in my browser (chrome, firefox) :(
Awesome work! Is there anyway to apply this principle to divs?
A-m-a-i-z-i-n-g!!