In this quick tutorial I will show you how to make 3D flip effect for anything using Elementor Pro.
First add this class name with column
column
Then add this class name with First inner section
cover
Then add this class name with Second inner section
details
Use this class name to hide any module from cover on hover.
hide
Use this CSS code
.column{
position: relative;
transform: perspective(2000px);
transition: 1s;
height:600px;
}
.column:hover{
transform: perspective(2000px) translateX(30%);
z-index: 1;
}
@media only screen and (max-width: 1200px) {
.column:hover{
transform: perspective(2000px) translateX(10%);
}
}
.column:hover .cover{
transform: rotateY(180deg);
animation: rotateAnimation 1s linear;
}
.column:hover .cover .hide{
display:none;
}
.column:hover .details{
overflow-x:hidden;
overflow-y:scroll;
display:block;
}
/*cover*/
.cover{
position:relative;
z-index:2;
width: 100%;
height: 100%;
cursor: pointer;
transform-origin: left;
}
/*details page*/
.details{
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
left: 0;
top: 0;
display:none;
}
@keyframes rotateAnimation {
from {transform: rotateY(0deg);}
to {transform: rotateY(180deg);}
}
0 Comments