Flipper

flipper-x
Your content

flipper-x minus
Your content

flipper-y
Your content

flipper-y minus
Your content
Structure
<div class="flipper flipper-x card">
<div class="front">
<img src="/images/icon.png"><h2>Learn to Explore</h2>
</div>
<div class="back">
<p>Your content</p>
</div>
</div>
Just replace flipper-x with your other class names
Style
<style>
*{box-sizing:border-box;}
.flipper {
position: relative;
transition: 1s;
transform-style: preserve-3d;
height: 250px; /*set height of flipper*/
width: 250px; /*set width of flipper*/
margin:10px;
}
.front,.back {
position: absolute;
top: 0;
left: 0;
height: 100%;
width:100%;
display:flex;
justify-content: center;
align-items:center;
backface-visibility: hidden;
flex-direction:column;
box-shadow:0 0 4px rgba(0,0,0,0.3);
}
.front{
background-color: #f7f7f7;
cursor:pointer;
}
.back{
background-color: black;
padding: 5px 10px;
color:white;
}
/*for flipper-x */
.flipper-x{
transform-origin: 100% 50%;
transform: perspective(2000px) rotateX(0deg);
}
.flipper-x .back{transform: rotateX(180deg);}
.flipper-x .front{transform: rotateX(0deg);}
.flipper-x:hover{
transform: perspective(2000px) rotateX(180deg);
}
.flipper-x.minus:hover{
transform: perspective(2000px) rotateX(-180deg);
}
/*for flipper-y */
.flipper-y{
transform-origin: 50% 100%;
transform: perspective(2000px) rotateY(0deg);
}
.flipper-y .back{transform: rotateY(180deg);}
.flipper-y .front{transform: rotateY(0deg);}
.flipper-y:hover{
transform: perspective(2000px) rotateY(180deg);
}
.flipper-y.minus:hover{
transform: perspective(2000px) rotateY(-180deg);
}
</style>