En el tutorial https://www.youtube.com/watch?v=XK7T3mY1V-w&list=WL&index=3 l’autor explica com elabora. el mateial que podem trobar al seu repositori de GitHub: https://github.com/developedbyed/3d-card-effect
És clarificador per aprendre a jugar amb javascript en animacions i efectes 3D. Aquest és el seu JS:
//Movement Animation to happen
const card = document.querySelector(".card");
const container = document.querySelector(".container");
//Items
const title = document.querySelector(".title");
const sneaker = document.querySelector(".sneaker img");
const purchase = document.querySelector(".purchase");
const description = document.querySelector(".info h3");
const sizes = document.querySelector(".sizes");
//Moving Animation Event
container.addEventListener("mousemove", (e) => {
letxAxis = (window.innerWidth / 2 - e.pageX) / 50;
letyAxis = (window.innerHeight / 2 - e.pageY) / 50;
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(-25deg)";
description.style.transform = "translateZ(100px)";
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)";
});