Elementor 3D Text Hover Effect with Corner Perspective in WordPress

 

 

CSSCode snippet on Main Section:

selector .elementor-background-overlay{
    z-index: 1;
}
selector .elementor-heading-title{
    cursor: default;
    transition: all 0.05s linear;
}
selector.anim .elementor-heading-title{
    transition: all 0.5s linear;
}

 

CSS Code snippet for cropping 2nd heading:

selector{
    clip-path: polygon(50% -600%, 100% -600%, 100% 600%, 50% 600%);
}

 

JavaScript code snippet for Elementor 3D Text Hover Effect:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

var intensity = 50,
    $ = jQuery

$(document).ready(function(){
    
$('.corner-text').on('mousemove touchmove', function(e){
    
    var x = $(this).width() - e.pageX*2
    
    $(this).removeClass('anim')
    $(this).find('.elementor-heading-title').css('transform', 'translateX(' + (x*intensity/100) + 'px)')
})

$('.corner-text').on('mouseout touchend', function(){
    $(this).addClass('anim')
    $(this).find('.elementor-heading-title').css('transform', 'translateX(0)')
})
})
</script>