3D flip effect for anything | Elementor tutorial

In this quick tutorial I will show you how to make 3D flip effect for anything using Elementor Pro.

Essential Links

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);}
}

Essential Links

Need this built rather than explained?