From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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!
Amazing.. !!
but… always the same problem…
webkit, webkit … and webkit. 🙁
This is Golden. CSS3 Eliminating Flash Completely. 🙂
Awesome,
hope “you” stay for pushing this material on the web !
Hi,
Haven’t seen any animation in chrome and FF. webkit…????
How version of (safari) webkit!!!
Excelente !!
Awesome !
Nice!
@CHINMAY “This is Golden. CSS3 Eliminating Flash Completely. :)”
Seriously? Oh how I hate remarks like this. Not only because it is completely ill-informed (you do realise how little market share Webkit still has, right?) but also because of the huge and biased naivety displayed. Flash allows a designer/develop to deploy across multiple platforms without writing and rewriting multiple code variants to appease browser idiosyncrasies. It also remains the simplest, most effective way to achieve many of today’s must-have features. For example, why exactly do I want or need to host several different versions of my video file?
Apple, much as I have always loved them, have done a massive disservice to the design community in seeking to kill off Flash. And technologies such as jQuery, CSS3 etc are really still playing catch-up on features that Flash has provided for years. Something to think about…
@The Grey Man
I perfectly agree!
as long as the old navigators ‘ll survive.. will be difficult to apply that.. even if i’ll like to to do that and to put IE and all non webkit browsers in the trash can !!!
it is my wish for Christmas 🙂
Just awesome !
a) The demo doesn’t work in Safari 5 in windows.
b) Thank you Grey Man. Hopefully more and more people will stop drinking the Apple Kool-aid and start to think about the reality of Flash (and Silverlight and Java). I love Flash but I look forward to the day when open standards and full DOM integration rule the internet…
…but in practical terms, that day is far from close and it’s a far better thing to push ALL technologies as far as they can go in the mean time, not just make small steps for niche slideshows.
Bashing browsers that aren’t webkit is just stupidity, as are any comments that suggest these sorts of techniques are the death of flash. They aren’t, because it will be several years before most people are using a browser capable of rendering these animations. These are lovely, but in a commercial project, completely unusable – at least without some sort of fallback/degradation.
By a fallback, I mean an alternative animation method. The pictures change fine in other browsers.
I am glad to see that my post that I posted was deleted
Do you keep only the positive posts ?
Thank you all for your feedback!
@PATRIOT Relax man! I don’t think any of your comments was deleted. I see the 3 comments you wrote here. Which one are you referring to?
Awesome animations!! (I’m going to ignore all the webkit vs. flash stuff)
This can totally work on Mozilla Aurora, too, if you just add the -moz- prefixes to the CSS. And also the -o- and prefixless versions. It is very short-sighted to only support one browser engine as all the vendors are working on support. You can see a demo here: http://www.netmagazine.com/tutorials/create-progressively-enhanced-3d-css-rollovers
Hi Chris, thanks for your feedback, I’ve tried to make it work in Aurora but I failed. It’s not that simple as to just add the -moz- prefixes for it, I guess. Maybe I missed something and I decided to leave it as a Webkit only experiment. I’m guessing that it has something to do with the animation-fill-mode, any ideas?
Looks awesome. It is a pity that only works on webkit.
re:patriot @ 12:51
It isn’t Webkit who has the problem. It’s the others. 😉
—
Awesome script. Gr8 inspiration.
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 😛
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 😀
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!!
Doesn’t work in Firefox 🙁
But it looks amazing in Chrome and Safari 😀
Good job!
I’ve almost got Example 6 under the Other category (the scale up and fade out transition) working in Firefox 12. It fires once, but then it looks like the .te-hide on the .te-cover div and the te-show class on the te-transition class aren’t being removed, so my first image is still there. I modified the jquery.transitions.js a bit to change webkitAnimationStart to animationstart and webkitAnimationEnd to animationend (temporarily as this breaks Webkit browsers). Now, the first image scales up and disappears and I’ve got image #2 showing – and, .te-hide and .te-show are gone. Unfortunately, they return when I click the Next button.
I’m so close! Any ideas how I can get it firing properly in Firefox?
Thanks for the inspiring work!
I just love to use jQuery and CSS3 based animation effects for web. However, CSS3 is not yet ready to take place of Flash and even not in the near future. Flash has its own charm which CSS3 can never provide us.
this is very good, absolutely amazing