Card Flip Animation Using CSS | Flipping Card CSS Animation

byCodingFlicks -September 12, 2020

0

Hello Friends, today, I will share with a snippet based on how we can create a simple card flip animation using CSS. Previously I have shared a snippet about Responsive Bootstrap 4 Cards Design. This project is also about the card, but I have shown a CSS animation of each card box's flipping effect when we hover over on it.

In this flipping profile card CSS animation, what will happen is that when someone hovers over, the image will transform and rotate 180 degrees horizontally. When the flip animation ends, we will see the information related to that image on the card's backside. We can use this project when we design testimonial or employee details of the website design.

In this simple card flip animation project using CSS, I have used bootstrap CSS and font-awesome icons along with HTML and CSS. I have included the CDN libraries for your convenience below to copy those and directly start your project.

In the HTML markup, I have taken a div element with the class name 'box-area,' and that will act as the cards' container. Then I have used the bootstrap container and row class to give some pre-defined margin padding from the framework. Inside row class, I have taken three bootstrap column grid. Inside each column grid, I have taken another div element named 'single-box' and provided and an in a div called 'front' and all the information about that image in a separate box named 'back.'

You May Also Like:

In the CSS part, I have taken 'Lato' as the primary font of the snippet. I have provided a custom padding from top and bottom for the card container class 'box-area.' I have given custom with and height of 350px for each 'single-box' div elements. After applying some basic styling for all the elements of the front and back component, I used CSS transform and backface-visibility property to create a CSS animation effect on the hover

Card Flip Animation Using CSS (Source Code) :

To create this snippet, you need to create two files. One of them is an HTML file, and another one is the CSS file. Then copy the HTML and CSS code and paste it to the appropriate files and save them.

REQUIRED FILES

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

HTML

<div class="box-area">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="single-box">
                    <div class="box-content">
                        <div class="front">
                            <img src="https://i.postimg.cc/J0RzF4Dn/1.jpg" alt="">
                        </div>
<div class="back">
                            <h1>
person one</h1>
<p>
Her Designation</p>
<p class="socials">
<i class="fa fa-facebook"></i>
                                <i class="fa fa-twitter"></i>
                                <i class="fa fa-dribbble"></i>
                                <i class="fa fa-pinterest"></i>
                            </p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
                <div class="single-box">
                    <div class="box-content">
                        <div class="front">
                            <img src="https://i.postimg.cc/G3j2yYVs/2.jpg" alt="Avatar">
                        </div>
<div class="back">
                            <h1>
person two</h1>
<p>
Her Designation</p>
<p class="socials">
<i class="fa fa-facebook"></i>
                                <i class="fa fa-twitter"></i>
                                <i class="fa fa-dribbble"></i>
                                <i class="fa fa-pinterest"></i>
                            </p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
                <div class="single-box">
                    <div class="box-content">
                        <div class="front">
                            <img src="https://i.postimg.cc/jdgS8Tsx/3.jpg" alt="">
                        </div>
<div class="back">
                            <h1>
person three</h1>
<p>
Her Designation</p>
<p class="socials">
<i class="fa fa-facebook"></i>
                                <i class="fa fa-twitter"></i>
                                <i class="fa fa-dribbble"></i>
                                <i class="fa fa-pinterest"></i>
                            </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

CSS

body {
font-family: lato;
}
.box-area {
padding: 100px 0;
}
.single-box {
background-color: transparent;
width: 350px;
height: 350px;
perspective: 1000px;
}

.box-content {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 12px 24px 0 rgba(0,0,0,0.5);
}

.single-box:hover .box-content {
transform: rotateY(180deg);
}

.front, .back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.front img {
width: 100%;
}
.back {
background-color: darkslateblue;
color: #fff;
padding-top: 90px;
transform: rotateY(180deg);
}
.back h1 {
text-transform: uppercase;
font-weight: bold;
font-size: 30px;
}
.back p {
font-size: 18px;
}
.socials {
margin-top: 30px;
}
.socials i {
padding: 0 5px;
}

That's it for this tutorial. I hope it helps. Please follow this blog on our Twitter and Facebook Group to keep yourself updated about the latest post.

Please do not enter any spam link in the comment box.