Elementor 3D Shading box hover effect

Features 

🔸Fully customizable 

🔸Responsive 

🔸Hover Effects

🔸CSS Code

  

Tutorial link:

https://youtu.be/RPrZhqzH3gc

☑️Support me on Patreon

https://www.patreon.com/developercrazy

🔸More WordPress Videos playlist 

🔸Unity Videos playlist 

🔸UI Template Downloadlink 

☑️Elementor file download link click here

CSS Code

<style>

.card{

    position: relative;

    width: 300px;

    height: 400px; 

    float: left;

-webkit-perspective: 1000px;

-moz-perspective: 1000px;

perspective: 1000px;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.card .face{

    position: absolute;

    top: 0;

    left: 0;

    width: 300px;

    height: 100%; 

    transform-style: preserve-3d;

    display: flex;

    justify-content: center;

    align-items: center;

    backface-visibility: hidden; 

-webkit-transition: -webkit-transform 345ms;

-moz-transition: -moz-transform 345ms;

transition: transform 345ms;

} 

.card:hover .face.front{

      

      -webkit-transform: rotateX(-5deg) rotateY(-82deg) translateZ(120px);

-moz-transform: rotateX(-5deg) rotateY(-82deg) translateZ(120px);

transform: rotateX(-5deg) rotateY(-82deg) translateZ(120px);

   

}

.card .face.back{

   

    position: relative;

    width: 100%;

    height: 100%; 

    -webkit-transform: rotateY(120deg) translateZ(30px);

-moz-transform: rotateY(120deg) translateZ(30px);

transform: rotateY(120deg) translateZ(30px);

}

.card:hover .face.back{

     

-webkit-transform: rotateX(-5deg) rotateY(30deg) translateZ(70px);

-moz-transform: rotateX(-5deg) rotateY(30deg) translateZ(70px);

transform: rotateX(-5deg) rotateY(30deg) translateZ(70px);

} 

@media only screen and (max-width: 768px) {

    .card .face{

        width: 240px;

    }

    .card:hover .face.back{

     

-webkit-transform: rotateX(-5deg) rotateY(30deg) translateZ(40px);

-moz-transform: rotateX(-5deg) rotateY(30deg) translateZ(40px);

transform: rotateX(-5deg) rotateY(30deg) translateZ(40px);

}

.card:hover .face.front{

      

      -webkit-transform: rotateX(-5deg) rotateY(-82deg) translateZ(120px);

-moz-transform: rotateX(-5deg) rotateY(-82deg) translateZ(120px);

transform: rotateX(-5deg) rotateY(-82deg) translateZ(100px);

   

}

}

</style>