¿Cuál sería el mejor enfoque para que esta cara siempre apunte hacia mi mouse? La parte complicada para mí ha sido sesgar y escalar como si estuviera girando alrededor de una esfera. (Lo convertí en una animación CSS para mostrar lo que me gustaría que hiciera)
¡Muchas gracias por su ayuda, y espero que tenga un gran día!
const head = document.querySelector('.head'); const face = document.querySelector('.face'); addEventListener('mousemove', e => { // face follows cursor // rotates and scales accordingly });
*, *::before, *::after { box-sizing: border-box; } @keyframes move { 0% { transform: translateX(0) translateY(0px) rotate3d(0, 0, 0, 45deg) scale(1); } 25% { transform: translateX(150px) translateY(0px) rotate3d(0, 10, 0, 45deg) scale(0.9); } 50% { transform: translateX(0px) translateY(-150px) rotate3d(10, 0, 0, 45deg) scale(0.9); } 75% { transform: translateX(-100px) translateY(100px) rotate3d(10, 10, 0, 45deg) scale(0.9); } } .head { width: 500px; height: 500px; border-radius: 50%; background-image: linear-gradient(120deg, yellow, #c47400); box-shadow: inset -5px -5px 20px yellow; position: relative; } .head::before { content: ""; position: absolute; left: 75px; top: 75px; border-radius: 50%; width: 150px; height: 150px; background-color: white; opacity: 0.35; filter: blur(45px) } .eye { width: 65px; height: 100px; margin: 10px; border-radius: 100px; display: inline-block; background-color: #8a6b0c; } .mouth { width: 175px; height: 50px; background-color: #8a6b0c; border-radius: 100px; } .container { width: 500px; height: 500px; display: flex; align-items: center; justify-content: center; } .face { display: inline-block; animation: move 4s ease infinite; }
<div> <div class="head"> <div class="container"> <div class="face"> <div class="eye"></div> <div class="eye"></div> <div class="mouth"></div> </div> </div> </div> </div>