• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

227
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error