html 在鼠标移动中改变网格透视的3d效果

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 在鼠标移动中改变网格透视的3d效果相关的知识，希望对你有一定的参考价值。

function fx3dfollow() {
    var point = document.querySelector(".point");
    var canvas = document.getElementById("canvas");
    canvas.onmousemove = function (e) {
        var delta = window.innerWidth / e.clientX;
        var omega = 0.002 / delta;
        var xAxis = omega - 0.001;

        var sigma = window.innerHeight / e.clientY;
        var beta = 0.002 / sigma;
        var yAxis = beta - 0.001;
        point.style.WebkitTransform = "matrix3d(1,0,0.00," + xAxis + ",0.00,1,0.00," + yAxis + ",0,0,1,0,0,0,0,1)";
        console.log(window.innerWidth);
    }
}

fx3dfollow();
.point {
    height: 200px;
    width: 200px;
    background-color: indianred;
    
    
}

#canvas {
    display: grid;
    justify-items: center;
    align-items: center;
    height: 100vh;
    margin: 0px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <link rel="stylesheet" href="main.css">
    <title></title>
</head>

<body id="canvas">
    <div class="point">
    </div>
    <script src="main.js"></script>
</body>
</html>

以上是关于html 在鼠标移动中改变网格透视的3d效果的主要内容，如果未能解决你的问题，请参考以下文章

CSS实现一个效果，当鼠标移上去时，下方出现一张图

关于unity3D UI 对canvas的操作问题（鼠标拖动改变画布大小）

html 3D透视效果

认识3d max 透视图

让交互更加生动！有意思的鼠标跟随 3D 旋转动效

Java 中的透视 3D 投影