Image rotation on mouse move as 3d is not working

[whizzbbig]

I am trying to rotate Image in the example i shared but its too vague, how i can make it more good? like interms of 3d

 

Example: https://stackblitz.com/edit/stackblitz-starters-pmqxre?file=app/page.tsx

[Rodrigo]

Hi,

 

The container of the element you are rotating needs a perspective applied to it, otherwise the rotation will be applied in 2D;

https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

 

https://3dtransforms.desandro.com/perspective

 

Something like this in your CSS:
 

.home__contact__bean__container {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  perspective: 250px;
  overflow: hidden;
}

Play with the value and see what works better for your taste. That value looks good IMHO.

 

Hopefully this helps.

Happy Tweening!