How to create card flip effect using html and css

  admin       January 21, 2020      620

Create Card Flip Effect Using HTML  CSS

Hello friends today i am going to share some codes that helps you to create card flip effect using html and css only.

Flip Card Effect using css

Hover mouse on the image

Rahul Gupta

Computer system Engineer

Cell No. 9847875648



 

Step 1- Add HTML 5 Code


<!DOCTYPE html>
<html>
<head>
<title>Flip Card Effect Using HTML5 and CSS</title>
</head>
<body>
<div class="container">
<h1>Flip Card Effect using css</h1>
<h3>Hover mouse on the image</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front-side">
<img src="images/avatar-rectangle.png" alt="avatar" >
</div>
<div class="flip-card-back-side">
<h1>Rahul Gupta</h1>
<p>Computer System Engineer</p>
<p>Cell No. 9847875648 </p>
<p>eMail:[email protected]</p>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-youtube-square"></i>
</div>
</div>
</div>
</div>
</body>
</html>

Step 2 – Set the following CSS Properties




 

 

 

Demo

1 thought on “How to create card flip effect using html and css”

Leave a Reply

Your email address will not be published. Required fields are marked *