Skip to main content

3D Flip Image Effect On Hover | Rustcode

by Rustcode
3D-Flip-Image-Effect-On-Hover-Rustcode

In web development, we can add a lot of animation to text, images, etc. We can use different libraries to include different types of effects but in this article, we are not using any type of libraries. To create this effect we will write simple CSS.

In this image effect, we will write code to flip the image vertically. So let's start with the code to create this effect, you can finally see a demo to this effect.



1. HTML STRUCTURE 

<!DOCTYPE html>
<html>
<head>
  <title>3D Flip Image Effect On Hover | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

	main content.

</body>
</html>


2. CONTENT

We are also including an image in the blog card design. You can download that image from here.

<body>
   <div class="flip-box">
      <div class="flip-box-inner">
         <div class="flip-box-front">
            <img src="image.jpg" alt="image">
         </div>
         <div class="flip-box-back">
            <h2>IMAGE</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae nibh mauris. 
               Sed eget enim vehicula, suscipit neque ac, venenatis metus. In nec
               nunc scelerisque, vulputate mauris eget, accumsan tortor. Quisque dictum
               tellus quis lectus porttitor,ac pulvinar felis iaculis. 
               Etiam eget nulla sit amet risus fringilla condimentum et pretium turpis.
             </p>
         </div>
      </div>
   </div>
</body>


3. CSS

body{
font-family: Arial, Helvetica, sans-serif;
background: #f1f1f1;
}

.flip-box{
width: 250px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 1px solid #f1f1f1;
border-radius: 4px;
box-shadow: 0px 4px 16px #111;
cursor: pointer;
perspective: 1000px;
}

.flip-box-inner{
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform-style: preserve-3d;
transition: transform 0.8s;
}

.flip-box-inner img{
border-radius: 4px;
width: 250px;
height: 400px;
}

.flip-box-front, .flip-box-back{
position: absolute;
width: 250px;
height: 400px;
backface-visibility: hidden;
border-radius: 4px;
}

.flip-box:hover .flip-box-inner{
transform: rotateY(180deg);
}

.flip-box-back{
width: 250px;
height: 400px;
background-color: #4A5759;
color: white;
transform: rotateY(180deg);
}

.flip-box-back p{
text-align: justify;
margin: 6px 12px;
font-size: 12px;
line-height: 2;
letter-spacing: 0.3px;
}



4. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


5. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.


RELATED POST:

Comments

Post a Comment