Experimental CSS3 Animations for Image Transitions

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

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

  1. Demo 1: Flip
  2. Demo 2: Rotate
  3. Demo 3: Multi-Flip
  4. Demo 4: Cube
  5. Demo 5: Unfold
  6. Demo 6: Others

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

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 46

Comments are closed.
  1. Pedro, I guess you already know though it doesn’t work in FireFox. Any fix make the other browsers behave?

  2. @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..

  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 😛

  4. ‘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.

  5. awesome
    but how i can use one selected option like example 7
    and hide the select option from the page?

  6. Amazing .. but if we do not have Chrome or Safari, don’t work..

    Awesome, for 3D navigator 😀

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