• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

225
Vistas
How can I make a div follow my mouse inside of a circle?

What would be the best approach to have this face always point towards my mouse? The tricky part for me has been having it skew and scale as if it's rotating around a sphere. (I turned it into a CSS animation to show what I would like it to do)

Thank you so much for your help, and I hope that you have a great day!

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>

almost 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda