HTML CODE:
<-----------COPY BELOW CODE AND PASTE IT IN index.html FILE
3D Flip Effect
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
<-----------COPY BELOW CODE AND PASTE IT IN style.css FILE
body{
margin:0;
padding:0;
font-family:sans-serif;
background:#333;
}
.card{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:350px;
height:250px;
background:#262626;
}
.card .imgbox{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transform-origin:bottom;
transition:0.5s;
transform:translateY(0) rotate(0deg);
}
.card:hover .imgbox{
transform:translateY(-100%) rotateX(90deg);
}
.card .details{
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background:#262626;
transform-origin:top;
transition:0.5s;
box-sizing:border-box;
padding:20px;
text-align:center;
transform:translateY(100%) rotateX(-90deg);
}
.card:hover .details{
transform:translateY(0%) rotateX(0deg);
}
.card .details .content{
position:absolute;
top:50%;
left:0;
width:100%;
transform:translateY(-50%);
}
.card .details .content h3{
color:#fff;
text-transform:uppercase;
}
.card .details .content h3 span{
font-size:14px;
color:#ff0;
}
.card .details .content ul{
margin:0;
padding:0;
display:flex;
width:100%;
padding:20px 40px;
box-sizing:border-box;
}
.card .details .content ul li{
list-style:none;
width:20%;
}
.card .details .content ul li a{
width:30px;
height:30px;
color:#262626;
background:#fff;
display:block;
text-align:center;
line-height:36px;
transition:.5s;
}
.card .details .content ul li a:hover{
color:#fff;
background:#00bcd4;
}
***********************************************************************
***********************************************************************