In this post, we will learn how to create 3d flipping effect on mouse hover using CSS. So how we can do this, we will learn in this post.  


How To Create 3D Flipping Effect On Mouse Hover Using CSS ?


Create 3D Flipping Effect On Mouse Hover

To create 3d flipping effect on mouse hover, we will use the CSS  backface-visibility  property. This property defines whether or not the back face of an element should be visible when facing the use. The back face of an element is a mirror image of the front face being displayed. This property is useful when an element is rotated. So we use this property to create 3d flipping effect. 


Along with this, we will use the CSS  transform  property. This property allows us to rotate, scale or move elements. 


In the following example there are two side of the card, one is front side and other is back side. The back side of the card is placed over the front side using the CSS  position  property, so in the beginning only one side of the card is visible.  


When we move the cursor to the back of the card it rotates and the front side of the card is displayed. The  backface-visibility  property hide the back side of the flipped elements. So that we can't see the back side of the flipped elements during the transformation, which create the illusion of 3d rotation. 


So how we can create 3d flipping effect using CSS, we will see in the following example.


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Create 3D Flipping Effect On Mouse Hover Using CSS ?</title>
<style>

.container {
margin: 50px;
perspective: 1000;
display: inline-block;
}

.container:hover .card {
transform: rotateY(180deg);
}

.card, .front-side, .back-side {
width: 200px;
height: 200px;
}

.card {
transition: 0.5s;
transform-style: preserve-3d;
position: relative;
}

.front-side, .back-side {
backface-visibility: hidden;
position: absolute;
}

.front-side {
z-index: 1;
transform: rotateY(180deg);
background-color: red;
background: url('https://source.unsplash.com/200x200/?tech') no-repeat;
}

.back-side {
z-index: 2; /* back side, placed above the front side */
transform: rotateY(0deg);
background-color: black;
background: url('https://source.unsplash.com/200x200/?coding') no-repeat;
}

span {
background-color: #000;
color: #fff;
padding: 5px 10px;
position: absolute;
}

</style>
</head>
<body>

<div class="container">
<div class="card">


<!-- front side -->
<div class="front-side">
<span>Front Side</span>
</div>

<!-- back side -->
<div class="back-side">
<span>Back Side</span>
</div>

</div>
</div>
</body>
</html> code-box


Summary

In this post we learned how to create 3d flipping effect on mouse hover using CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.  

Post a Comment

Previous Post Next Post