Yep, as I said in the title this could be the very simple and very minimal code used for the CSS Flip Animation. This tutorial covers how to do Horizontal flip animation.
HTML5 and CSS 3 is a powerful technology so far I’ve ever seen, both are now replacing a lot of JavaScript operations. And the beauty in it you will be using a very minimal code and can be easily understandable.
If you want to see the demo / download before going to the tutorial, just scroll down to the bottom of the post to do that.
In this tutorial there is absolutely no JavaScript or jQuery used. All animations and everything done with CSS3 properties only.
Here is the HTML part:
|
1 2 3 4 |
<div id='holder'> <img src='front.png' class='front' /> <img src='back.png' class='back' /> </div> |
As I said there is nothing in the HTML code, just a wrapper div and two images are used in this tutorial.
CSS Part:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.front, .back { position: absolute; -webkit-transition: all .6s; -moz-transition: all .6s; -o-transition: all .6s; -ms-transition: all .6s; transition: all .6s; backface-visibility: hidden; } .front { z-index: 1; } #holder:hover .front, .back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); z-index: 0; } #holder:hover .back { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); z-index: 1; } |
So, what is that in the CSS?
1. There is a holder which holds two images (you can use two divs instead of img), class front and back.
2. Both first and back positioned absolute, so it is overlapped on one another, controlled with z-index.
3. On hover the mouse on the holder div both front and back Y-Axis is rotated with the help of CSS3 property rotateY;
I understood, but how to do Vertical Flip?
1. Again it simple, instead of rotating Y-Axis rotate X-Axis
eg:
|
1 |
-webkit-transform: rotateX(0deg); |
See the Demo here or just Download the code so you can play around with it:
