基于鼠标坐标的透视旋转与居中的 div [Javascript]答案

【问题标题】：Mouse coordinate based perspective rotation with centered div [Javascript]基于鼠标坐标的透视旋转与居中的 div [Javascript]
【发布时间】：2015-12-13 00:28:30
【问题描述】：

我问了第二个问题，所以如果我需要添加任何其他内容，请告诉我！

一直在到处寻找以尝试理解概念，但我觉得我想多了。我正在尝试做的是将用户光标的 x 位置与窗口大小成比例地“变换：rotateX("x"deg)”。这是一个可以满足我要求的 gif，但它们使用的是 matrix3D 而不是变换的旋转。

http://i.imgur.com/tUZSLXA.gif

这是我目前所拥有的 js fiddle。
https://jsfiddle.net/z7bet2sw/

JS：

function rotate() {
    var x = event.clientX;

    var w = window.innerWidth;
    var midpoint = w / 2;

    // restrictions for rotation
    if (x > -20 && x < 20) {


        document.getElementsById("logo").style.transform = "perspective(550px)" + "rotateY(" + x + "deg)";
    } else {

    }
}

document.addEventListener("mousemove", rotate);

谢谢！

【问题讨论】：

标签： javascript html css transform perspective

【解决方案1】：

您需要将事件参数从addEventListener 传递给rotate 函数，还需要从x 坐标计算相对位置，得到-20 到20 之间的值：

function rotate (event) 
{
    var x = event.clientX;
    var w = window.innerWidth;
    var midpoint = w / 2;
    var pos = x - midpoint;
    var val = (pos / midpoint) * 20;
    var logo = document.getElementById ("logo");
    logo.style.transform = "perspective(550px) rotateY(" + val + "deg)";
}

document.addEventListener("mousemove", function(event)
{
    rotate(event)
}, false);

JSFiddle

【讨论】：

漂亮！正是我想要的！非常感谢！

【解决方案2】：

两个问题：

您使用的是document.getElementsById，实际上应该是document.getElementById（不是s）
你应该从x中减去midpoint

更新代码：

function rotate() {
  var x = event.clientX;

  var w = window.innerWidth;
  var midpoint = w / 2;

  x -= midpoint;
  if (x > -20 && x < 20) {
    document.getElementById("logo").style.transform = "perspective(550px)" + "rotateY(" + x + "deg)";
  } else {

  }
}

小提琴：https://jsfiddle.net/jacquesc/z7bet2sw/1/

【讨论】：

太棒了！谢谢！有没有办法让它使用整个窗口的宽度，而不仅仅是大约 40 像素的值？
很明显，您只需要更改 x 的值的测试界限...