From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
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
<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.
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!