How to create card flip effect using html and css
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
Like!! Really appreciate you sharing this blog post.Really thank you! Keep writing.