i want 3 card ui perfect, i want each card to have a 3d hover effect, depending on the position of the mouse on the card. in javascript

To create a 3D hover effect for each card in a 3-card UI, you can use JavaScript, CSS, and HTML. Here's an example of how you can achieve this effect:

First, let's define the HTML structure for the 3-card UI:

<div class="card" id="card1"></div>
<div class="card" id="card2"></div>
<div class="card" id="card3"></div>
108 chars
4 lines

Next, let's style the cards using CSS:

.card {
  width: 300px;
  height: 200px;
  background-color: #ccc;
  transition: transform 0.5s;
}

.card:hover {
  transform: rotateY(20deg);
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
}
192 chars
12 lines

In the above CSS, we define the basic card styles and the hover effect. When a card is hovered, it rotates by 20 degrees on the Y-axis and adds a box shadow.

Finally, let's add the JavaScript logic to track the position of the mouse on each card:

index.tsx
const cards = document.querySelectorAll('.card');

cards.forEach(card => {
  card.addEventListener('mousemove', rotateCard);
  card.addEventListener('mouseout', resetCard);
});

function rotateCard(e) {
  const card = this;
  const cardRect = card.getBoundingClientRect();
  const mouseX = e.clientX - cardRect.left;
  const rotation = ((mouseX / cardRect.width) * 40) - 20;
  card.style.transform = `rotateY(${rotation}deg)`;
}

function resetCard() {
  this.style.transform = 'none';
}
488 chars
19 lines

In the JavaScript code above, we add event listeners to each card to track mouse movement. We calculate the position of the mouse relative to the card and use that to determine the rotation angle. When the mouse moves, the rotateCard function is called, which applies the rotation to the card. When the mouse leaves the card, the resetCard function is called, which resets the card's rotation to the default state.

This combination of HTML, CSS, and JavaScript will give you a 3-card UI with a 3D hover effect that depends on the position of the mouse on the card.