create a 3d hover animation on hover card in javascript

To create a 3D hover animation on a card element using JavaScript, you can use CSS transitions and transforms. Here's an example:

HTML:

<div class="card">
  <div class="content">
    <h1>Card Title</h1>
    <p>This is the card content.</p>
  </div>
</div>
120 chars
7 lines

CSS:

.card {
  width: 300px;
  height: 200px;
  background-color: #f1f1f1;
  border-radius: 10px;
  perspective: 1000px; /* Set the perspective for 3D effect */
  transition: transform 0.3s;
}

.card:hover {
  transform: rotateY(10deg);
}

.content {
  padding: 20px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.3s;
}

.card:hover .content {
  transform: rotateY(-10deg);
}
414 chars
24 lines

JavaScript is not specifically required for the 3D hover animation, so you can achieve it with CSS only. However, if you want to manipulate the card dynamically using JavaScript, you can use event listeners to add or remove classes for the animation effect.

Remember to adjust the CSS properties such as width, height, background color, and padding to match your desired card design.

Note that for this to work, you need to ensure that the browser supports CSS transform property.

Hope this helps!