Exogenist
1/28/2018 - 6:17 PM

3d effect that changes perspective of grid on mouse move

3d effect that changes perspective of grid on mouse move

main.js
content_copyfile_download
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();
main.css
content_copyfile_download
.point {
    height: 200px;
    width: 200px;
    background-color: indianred;
    
    
}

#canvas {
    display: grid;
    justify-items: center;
    align-items: center;
    height: 100vh;
    margin: 0px;
}
index.html
content_copyfile_download
<!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>