Question 383130 in Html Question posted in
Some basic documentation can be found here.

Html – CSS rotating box on hover with light under cursor

I have the following html file:

const container = document.querySelector('.container');
const box = document.querySelector('.box');
const light = document.querySelector('.light');

container.addEventListener('mousemove', moveLight);

function moveLight(event) {
  const containerRect = container.getBoundingClientRect();
  light.style.left = event.clientX - containerRect.left + 'px';
  light.style.top = event.clientY - containerRect.top + 'px';
}

// Adjust the light position initially in case of default hover
container.addEventListener('mouseenter', moveLight);

container.addEventListener('mousemove', rotateBox);

function rotateBox(event) {
  const containerRect = container.getBoundingClientRect();
  const centerX = containerRect.left + containerRect.width / 2;
  const centerY = containerRect.top + containerRect.height / 2;
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  const deltaX = mouseX - centerX;
  const deltaY = mouseY - centerY;

  const maxRotation = 30; // Adjust the maximum rotation angle
  const rotateX = -deltaY / centerY * maxRotation; // Negative rotation for bringing closer
  const rotateY = -deltaX / centerX * maxRotation; // Negative rotation for bringing closer

  box.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
}
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.container {
  position: relative;
  width: 600px;
  height: 400px;
  perspective: 800px;
  /* Adjust as needed */
  overflow: hidden;
}

.box {
  width: 100%;
  height: 100%;
  background-color: #0d419d;
  transition: transform 0.3s ease;
  position: relative;
  overflow: hidden;
}

.light {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #006d32;
  /* Adjust opacity as needed */
  pointer-events: none;
  /* Ensure the light doesn't interfere with mouse events */
  transform: translate(-50%, -50%);
  display: none;
  /* Initially hidden */
  z-index: 1;
  filter: blur(3rem);
}

.container:hover .light {
  display: block;
  /* Show the light when hovering over the container */
}
<div class="container">
  <div class="box"></div>
  <div class="light"></div>
</div>

Which is exhibiting some behavior I’m not sure how to fix. It is rotating but only a part of the box is rotating on hover, while the rest isn’t, changing the shape of the 2d box.

I’d like the entire box to rotate towards the user (so I’m assuming -z direction), so if I hover the top left corner, the top left corner moves a little towards me with the rest of the box acting normal (as one piece).

I’m sure this can be done in pure css, if anyone has that solution, I’d prefer it, something like a transform property with the following maybe?

perspective(700px) rotateX(-0.03deg) rotateY(0.03deg);
Tags:

2

Answers


  1. 0

    I saw the issue as when the .box rotates, it reached the boundaries of the parent element (.container), and the .container cut off the entire visible part of the .box that extended beyond its boundaries, because this is exactly how ‘overflow:hidden’ works.

    Your code works perfectly to me and this small adjustment will help you to see it: remove ‘overflow: hidden;‘ property from the ‘.container’ element.

    So leave it styled like this:

    .container {
    position: relative;
    width: 600px;
    height: 400px;
    perspective: 800px;
}
    Login or Signup to reply.
  2. 0

    Creating a rotating box on hover with a light effect under the cursor involves a combination of CSS for the rotating box and JavaScript for the light effect. Here’s how you can achieve it:

    document.addEventListener('mousemove', function(e) {
  const light = document.createElement('div');
  light.classList.add('light');
  light.style.top = e.clientY + 'px';
  light.style.left = e.clientX + 'px';
  document.body.appendChild(light);
  
  // Remove the light element after a short delay
  setTimeout(function() {
    document.body.removeChild(light);
  }, 200);
});
    .container {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 1000px; /* Add perspective for 3D effect */
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transform: translate(-50%, -50%);
  transition: transform 0.5s; /* Add transition for smooth rotation */
}

.container:hover .box {
  transform: translate(-50%, -50%) rotateX(180deg) rotateY(180deg); /* Rotate the box on hover */
}

.light {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.5); /* Light color with transparency */
  border-radius: 50%;
  pointer-events: none; /* Ensure the light doesn't interfere with hover */
  transform: translate(-50%, -50%);
  transition: transform 0.1s, opacity 0.2s; /* Add transition for smooth movement and visibility */
}
    <div class="container">
  <div class="box"></div>
</div>

    In this code:

    • We create a container with a box inside it. On hover, the box rotates.
    • We use JavaScript to create a light effect under the cursor on mouse movement.
    • The light effect is created by dynamically creating and positioning a div element with a CSS class named .’light’.
    • This div follows the mouse cursor and has a short transition for smooth movement and visibility.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search