
To learn how to create the 3d flip box follow the steps below:
Demo:
Side A
Flip Vertical
Side B
Side A
Flip Horizontal
Side B
Flip Vertical:
Step1.
Add HTML
Create the flip box:
<h3>Flip Vertical:</h3>
<div class="flip-box-v">
<div class="flip-box-basev">
<div class="flip-box-side-av">
<h3>Side A</h3>
</div>
<div class="flip-box-side-bv">
<h3>Side B</h3>
</div>
</div>
</div>
Step2.
Add CSS
.flip-box-v {
background-color: transparent;
width: 200px;
height: 200px;
perspective: 1000px;
}
.flip-box-basev {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.7s;
transform-style: preserve-3d;
}
.flip-box-v:hover .flip-box-basev {
transform: rotateX(180deg);
}
.flip-box-side-av, .flip-box-side-bv {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-box-side-av {
background-color: #2a9d8f;
color: black;
}
.flip-box-side-bv {
background-color: #e9c46a;
color: black;
transform: rotateX(180deg);
}
Output:
Flip Vertical:
Side A
Side B
Flip horizontal:
Step1.
Create the flip box:
Add HTML
<h3>Flip horizontal:</h3>
<div class="flip-box-h">
<div class="flip-box-baseh">
<div class="flip-box-side-ah">
<h3>Side A</h3>
</div>
<div class="flip-box-side-bh">
<h3>Side B</h3>
</div>
</div>
</div>
Step2.
Add CSS
.flip-box-h {
background-color: transparent;
width: 200px;
height: 200px;
perspective: 1000px;
}
.flip-box-baseh {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.7s;
transform-style: preserve-3d;
}
.flip-box-h:hover .flip-box-baseh {
transform: rotateY(180deg);
}
.flip-box-side-ah, .flip-box-side-bh{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-box-side-ah {
background-color: #2a9d8f;
color: black;
}
.flip-box-side-bh {
background-color: #e9c46a;
color: black;
transform: rotateY(180deg);
}
Output:
Flip horizontal:
Side A
Side B
Enjoy coding!
Read also: