The Elementor 3D tilt mouse effect

You don’t need Elementor Pro to achieve the 3D tilt mouse effect. Just add this code to your webpage, and any element you’re working on will have that cool 3D tilt effect.

<div class= button_container>
<button id="tiltButton">Hover Over Me</button>  
</div>

<style>
.button_container{
    display: flex;
    justify-content: center;
}

    #tiltButton {
    width: 200px;
    height: 50px;
    background-color: #3498db;
    color: white;
    cursor: pointer;
    transition: transform 0.1s;
    transform-style: preserve-3d;
}

body {
    perspective: 500px;
}
</style>

<script>
     document.getElementById('tiltButton').addEventListener('mousemove', function(event) {
    const rect = this.getBoundingClientRect();
    const x = event.clientX - rect.left; 
    const y = event.clientY - rect.top;  

    const centerX = rect.width / 2;
    const centerY = rect.height / 2;

    const deltaX = (x - centerX) / centerX;
    const deltaY = (y - centerY) / centerY;

    const rotationY = deltaX * 20;  
    const rotationX = deltaY * -20;  

    this.style.transform = `rotateX(${rotationX}deg) rotateY(${rotationY}deg)`;
});

document.getElementById('tiltButton').addEventListener('mouseleave', function(event) {
    this.style.transform = 'rotateX(0deg) rotateY(0deg)';
});

</script>