跟随鼠标jquery旋转图像，实现平滑过渡

<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

<div id="image-container">
  <img src="image.jpg" alt="Image">
</div>

#image-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  perspective: 1000px;
}

#image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

$(document).ready(function() {
  var container = $('#image-container');
  var image = $('#image-container img');
  var containerWidth = container.width();
  var containerHeight = container.height();
  
  container.mousemove(function(event) {
    var mouseX = event.pageX - container.offset().left;
    var mouseY = event.pageY - container.offset().top;
    var rotateX = (mouseY - containerHeight / 2) / containerHeight * 10;
    var rotateY = (mouseX - containerWidth / 2) / containerWidth * 10;
    
    image.css('transform', 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)');
  });
});