Image Flip Animation | Image Animation using html css

Image Flip Animation | Image  Animation using html css





Image Flip Animation | Image  Animation using html css



Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create Image Flip Animation. We use HTML & CSS  for this Image Flip Animation . Hope you enjoy our blog so let's start with a basic HTML structure for Image Flip Animation.

HTML code for Image Flip Animation 

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Image Flip Animation</title>  
   <link rel="stylesheet" href="style.css">  
 </head>  
 <body>  
   <div class="box">  
     <div class="front">  
       <img src="main.jpg" alt="">  
     </div>  
     <div class="back">  
       <h1>Heading</h1>  
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, odio?</p>  
     </div>  
   </div>  
 </body>  
 </html>  
There is all HTML code for the Image Flip Animation. Now, you can see output without CSS, then we write CSS for our Image Flip Animation.

OutPut
 @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');  
 *{  
   margin: 0;  
   padding: 0;  
   box-sizing: border-box;  
   font-family: 'Poppins', sans-serif;  
 }  
 body{  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   height: 100vh;   
 }  
 .box{  
   width: 350px;  
   height: 250px;   
   position: relative;  
 }  
 .box .front,  
 .box .back{  
   position: absolute;  
   width: 350px;  
   height: 250px;   
   background: white;  
   backface-visibility: hidden;  
   transform-style: preserve-3d;  
   cursor: pointer;  
   border-radius: 20px 20px 0 0;  
   border-radius: 20px;  
   box-shadow: 0 5px 30px rgba(163, 61, 21, 0.200 ),  
   0 -5px 30px rgba(115, 55, 212, 0.200);  
   transition: transform .4s;  
 }  
 .box .back{  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   flex-direction: column;  
   transform: perspective(800px) rotateX(-180deg);  
 }  
 .box .back p{  
   margin: 10px 20px;  
   text-align: center;  
 }  
 .box .front img{  
   width: 100%;  
   height: 100%;  
   border-radius: 0 0 20px 20px;  
   position: absolute;  
 }  
 .box:hover .front{  
   transform: perspective(800px) rotateX(180deg);  
 }  
 .box:hover .back{  
   border-radius: 20px 20px 0 0;  
   transform: perspective(800px) rotateX(0);  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

OutPut


Image Flip Animation | Image  Animation using html css

Image Flip Animation | Image  Animation using html css

Check it more








Now we have completed our CSS section,  Here is our updated output with  CSSHope you like Image Flip Animation, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create an Image Flip Animation using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post