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.

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

Start Working with me for any wordpress project!

Get in touch

Have a few questions or just want to say hello? Use the form below to get in touch with me! If you are ready to book a new project please click here to fill out a design inquiry.

Call me by Skype (farjana.rashid55)

9 + 15 =

[wpforms id="2272"]