app.js

/*
*
=========================================================
* 3D Animated Card
=========================================================
* Coded by Aditya Chaphekar
=========================================================
*
*/

//Movement Animation to happen
const card = document.querySelector(".app__card");
const container = document.querySelector(".app__container");
//Items
const title = document.querySelector(".cardBody__title");
const sneaker = document.querySelector(".app__cardHeader img");
const purchase = document.querySelector(".cardBody__purchase");
const description = document.querySelector(".app__cardBody h3");
const sizes = document.querySelector(".cardBody__sizes");

//Moving Animation Event
container.addEventListener("mousemove", (e) => {
  let xAxis = (window.innerWidth / 2 - e.pageX) / 25;
  let yAxis = (window.innerHeight / 2 - e.pageY) / 25;
  card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});
//Animate In
container.addEventListener("mouseenter", (e) => {
  card.style.transition = "none";
  //Popout
  title.style.transform = "translateZ(150px)";
  sneaker.style.transform = "translateZ(200px) rotateZ(-45deg)";
  description.style.transform = "translateZ(125px)";
  sizes.style.transform = "translateZ(100px)";
  purchase.style.transform = "translateZ(75px)";
});
//Animate Out
container.addEventListener("mouseleave", (e) => {
  card.style.transition = "all 0.5s ease";
  card.style.transform = `rotateY(0deg) rotateX(0deg)`;
  //Popback
  title.style.transform = "translateZ(0px)";
  sneaker.style.transform = "translateZ(0px) rotateZ(0deg)";
  description.style.transform = "translateZ(0px)";
  sizes.style.transform = "translateZ(0px)";
  purchase.style.transform = "translateZ(0px)";
});