在Html和JS中旋转滚轮添加组件

<div id="container"></div>

#container {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  transform: rotateY(45deg);
}

var container = document.getElementById("container");

container.addEventListener("wheel", function(event) {
  event.preventDefault(); // 阻止滚轮默认行为

  var rotation = getRotation(container); // 获取当前旋转角度
  var delta = event.deltaY > 0 ? 1 : -1; // 判断滚轮滚动方向

  container.style.transform = "rotateY(" + (rotation + delta * 90) + "deg)";
});

function getRotation(element) {
  var transform = window.getComputedStyle(element).getPropertyValue("transform");
  var matrix = transform.match(/^matrix\((.+)\)$/);

  if (matrix) {
    var values = matrix[1].split(",");
    var angle = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
    return angle >= 0 ? angle : angle + 360;
  }

  return 0;
}