Can we create 3D Parallax card hover effect in Velo

Ask the community
,
1

I am a complete code novice and need help with creating the above using Velo on some portfolio images on my site, using Editor X.

Code example:
let image1 = document.getElementById( “image1” );
let subpanel = document.getElementById( “imageContainer1” );

image1.onmousemove = transformImage1;
image1.onmousenter = handleMouseEnter;
image1.onmouseleave = handleMouseLeave;

let mouseX, mouseY;

let transformAmount = 5 ;

function transformImage1(mouseEvent) {
mouseX = mouseEvent.pageX;
mouseY = mouseEvent.pageY;

const centerX = image1.offsetLeft + image1.clientWidth / 2 ;
const centerY = image1.offsetTop + image1.clientHeight / 2 ;

const percentX = (mouseX - centerX) / (image1.clientWidth / 2 );
const percentY = -((mouseY - centerY) / (image1.clientHeight / 2 ));

subpanel.style.transform =  "perspective(400px) rotateY("  + percentX * transformAmount +  "deg) rotateX("  + percentY * transformAmount +  "deg)" ;

}

export function image1_mouseIn_1(event) {
setTimeout(() => {
subpanel.style.transition = “” ;
}, 100 );
subpanel.style.transition = “transform 0.1s” ;
}

export function image1_mouseOut(event) {
subpanel.style.transition = “transform 0.1s” ;
setTimeout(() => {
subpanel.style.transition = “” ;
}, 100 );

subpanel.style.transform =  "perspective(400px) rotateY(0deg) rotateX(0deg)" ;

}
Any assistance would be most appreciated.
Mike