In this topic,
We are going to see how to create a flip box on hover.
Step-1: Create Html Code in the index.html file.
<body>
<div class="main-hover-section">
<div class="main-hover-inner-section container">
<div class="hover-section-row">
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Step-2: Add CSS Code in the <style>…</style> on the index.html file.
*{
box-sizing: border-box;
}
body{
margin: 0;
}
.container:after{
content:"";
display:block;
clear:both;
}
body .container{
width:100%;
max-width:1200px;
padding-left:15px;
padding-right:15px;
margin:0 auto;
position:relative;
float:none;
}
body .container .container{
width:100%;
max-width:100%;
padding-left:0;
padding-right:0;
}
.hover-section-row{
display: flex;
flex-wrap: wrap;
margin: 0px -15px;
}
.flip-box{
width: 25%;
padding: 0px 15px;
}
.main-hover-section {
background-color: #fff3f3;
padding: 50px 15px;
}
.flip-box-inner{
background-color: #fff3f3;
padding: 50px 15px;
}
.flip-box-back {
background-color: #898989;
color: #fff;
transform: rotateY(180deg);
}
.flip-box-front {
background-color: #fff;
color: #442929;
}
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
In this animation,
I took the main one div is “flip-box-inner”. and this div in the took the new two div. first is “flip-box-front” and second “flip-box-back”.
then I gave the first and second boxes set in position absolute.
and I rotateY(180deg) the “flip-box-inner” div on the box hover.
Then I added the “transform-style: preserve-3d” property in the “flip-box-inner” div.
Then my box properly flipped.
Review the below video.
