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

Question

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

一直在到处寻找尝试理解概念，但我觉得我想多了。我想要做的是基于 "transform: rotateX("x"deg)" 用户光标的 x 位置与 window 的大小成比例。这是一个满足我要求的 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);

谢谢！

Answer 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

Answer 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 {

  }
}

fiddle: https://jsfiddle.net/jacquesc/z7bet2sw/1/

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

Mouse coordinate based perspective rotation with centered div [Javascript]

html

javascript

css

transform

perspective