鼠标悬浮进行倾斜效果

鼠标悬浮进行倾斜效果要实现鼠标悬浮时的倾斜效果，你可以使用CSS的transform属性结合

元素

	<div class="cardItem cardAni"></div>

css样式

.cardItem{
  width: 300px;
  height: 300px;
  background: #000000;
}
.cardAni {
cursor: pointer;
transition: transform 0.5s;
transform: rotateX(0deg) rotateY(0deg);
}
## js

$('.cardAni').mousemove(function (e) {
    // 获取元素的位置和尺寸
    var elementOffset = $(this).offset();
    var elementWidth = $(this).width();
    var elementHeight = $(this).height();

    // 计算鼠标相对于元素中心的位置
    var relativeX = e.pageX - (elementOffset.left + elementWidth / 2);
    var relativeY = e.pageY - (elementOffset.top + elementHeight / 2);
    // 根据鼠标相对于中心的偏移量计算旋转角度
    // 这里我们使用了简单的线性关系来计算角度，你可以根据需要调整算法
    let rotateX
    let rotateY
    const step = 20
    if (relativeX > 0 && relativeY > 0) {
      // 右下
      rotateX = -relativeX / step;
      rotateY = relativeY / step;
    }
    if (relativeX < 0 && relativeY > 0) {
      // 左下
      rotateX = -relativeX / step;
      rotateY = relativeY / step;
    }
    if (relativeX > 0 && relativeY < 0) {
      // 右上
      rotateX = -relativeX / step;
      rotateY = -relativeY / step;
    }
    if (relativeX < 0 && relativeY < 0) {
      // 左上
      rotateX = -relativeX / step;
      rotateY = -relativeY / step;
    }
    // 设置旋转变换
    $(this).css('transform', 'rotateX(' + parseFloat(rotateX, 2) + 'deg) rotateY(' + parseFloat(rotateY, 2) + 'deg)');
  });
  
  // 当鼠标离开元素时，重置倾斜角度
  $('.cardAni').mouseleave(function () {
    $(this).css('transform', 'rotateX(0deg) rotateY(0deg)');
  });