CSS Flipping Animation With Example
Contents
CSS Flipping Animation With Example : Introduction
Css animations are widely used. The beauty of css animations lies in its simplicity. In this article we will see how to use css animation. See the following code:
<html>
<head>
<style>
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper
{
transform: rotateY(180deg);
}
.flip-container, .front, .back
{
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper
{
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back
{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front
{
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back
{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
<img src="image.jpg" height="480" width="320">
</div>
<div class="back">
<!-- back content -->
<img src="image2.jpg" height="480" width="320">
</div>
</div>
</div>
</body>
</html>
CSS Flipping Animation With Example : Output:
Now when mouse is on the image the image itself changes as seen in the following two outputs:
Explanation Of The Code
Now let’s understand the process of the flipping. In the code we have added mainly four classes i.e. flip-container, flipper, front and back. Front and Back are two images.
Now first we have flipped the pane when mouse is on it. Then after we have defined the width and height of it. After that we have defined the speed of it. Then after we have hided the back face visibility of each image. After that we have putted front on the back. Lastly we have hided back initially.
CSS Flipping Animation With Example : Conclusion
I hope that you have really enjoyed this article and have got enough knowledge of css animations. Comments and questions are welcome.
Have you got cool idea about Web Development or Design? Contact us Now to get free consultation on your idea. Alphanso Tech is rated as one of the best Web Development Company in India.
Post by Alphanso Tech
Created in 2013, Alphanso Tech is a leading IT Consulting company with a presence in the USA, Canada, and India.We are a trusted and leading service provider to many top-tier companies in the area of Custom WordPress Development , Web Application Development , iOS App Development , Outsourcing Services, Online Marketing and many other related activities.
