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

Question

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

一直在到处寻找尝试理解概念，但我觉得我想多了。我想要做的是根据窗口大小按比例从用户光标的 x 位置“变换:旋转 X(”x“度”)。这是一个做我想要的 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