javascript 鼠标跟随透视

Posted 2021-05-04

  var XAngle = 0;
  var YAngle = 0;
  var Z = 50;
  var container = $("#logoTitle");
  var element = $("#element");
  
  container.on("mousemove", function(e) {
    var XRel = e.pageX - $(this).offset().left;
    var YRel = e.pageY - $(this).offset().top;
    var width = logo.width();
    YAngle = -(0.5 - XRel / width) * 4;
    XAngle = (0.5 - YRel / width) * 4;
    updateView(element);
  });

  container.on("mouseleave", function() {
    reseteView(element);
  });

  function reseteView(ele) {
    ele.css({
      transform: "perspective(525px) translateZ(0) rotateX(0deg) rotateY(0deg)",
      transition: "all 150ms linear 0s",
      "-webkit-transition": "all 150ms linear 0s"
    });
  }
  function updateView(ele) {
    ele.css({
      transform:
        "perspective(525px) rotateX(" + XAngle + "deg) rotateY(" + YAngle + "deg)"
    });
  }