document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".ti-incline").forEach(element => {
element.style.transition = "transform 0.2s ease-out, box-shadow 0.2s ease-out";
const handleMove = (event) => {
const { left, top, width, height } = element.getBoundingClientRect();
const centerX = left + width / 2;
const centerY = top + height / 2;
const deltaX = (event.clientX - centerX) / (width / 2);
const deltaY = (event.clientY - centerY) / (height / 2);
const rotateX = deltaY * -15;
const rotateY = deltaX * 15;
const shadowX = deltaX * -20;
const shadowY = deltaY * 20;
element.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
element.style.boxShadow = `${shadowX}px ${shadowY}px 30px rgba(0, 0, 0, 0.3)`;
};
const resetTransform = () => {
element.style.transform = "perspective(600px) rotateX(0) rotateY(0)";
element.style.boxShadow = "none";
};
element.addEventListener("mouseenter", () => {
element.addEventListener("mousemove", handleMove);
});
element.addEventListener("mouseleave", () => {
element.removeEventListener("mousemove", handleMove);
resetTransform();
});
});
});