generated from ferneynava/Best-README-Template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
29 lines (21 loc) · 1.1 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const card = document.querySelector(".wrapper__card");
const imagen_perfil = document.querySelector(".wrapper__image");
const rect = document.body.getBoundingClientRect();
const mitadWidth = rect.width/2;
const mitadHeight =rect.height/2;
window.addEventListener("mousemove", (event) => {
card.style.transition = "none";
imagen_perfil.style.transition = "none";
const offSetX = event.pageX;
const offSetY = event.pageY;
const rotationX = ((offSetX - mitadWidth) / mitadWidth) * 22;
const rotationY = ((offSetY - mitadHeight) / mitadWidth) * 22;
card.style.transform = "rotateX("+ rotationX + "deg) rotateY("+ rotationY + "deg)";
imagen_perfil.style.transform = "rotateX("+ rotationX + "deg) rotateY("+ rotationY + "deg)";
})
window.addEventListener("mouseout", () => {
card.style.transition = "transform .5s ease-in-out";
card.style.transform = "rotateX(0deg) rotateY(0deg)";
imagen_perfil.style.transition = "transform .5s ease-in-out";
imagen_perfil.style.transform = "rotateX(0deg) rotateY(0deg)";
})