JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="main">
        <div class="container">
            <div id="logo"></div>
        </div>
    </div>
</body>

CSS

#logo
{
    height: 150px;
    width: 450px;
    background: red;
    margin: 50px auto;
    transform: perspective(500px) rotateY(-20deg);
}

JavaScript

var logo = document.getElementById("logo");

function rotate (event) 
{
    var x = event.clientX;
    var y = event.clientY;
    
  	var w = window.innerWidth;
    var h = window.innerHeight;
    
    var midpoint = w / 2;
    var pos = x - midpoint;
    var val = (pos / midpoint) * 10;
    
    var midpointY = h / 2;
    var posY = y - midpointY;
    var valY = (posY / midpointY) * 10;
    
    
    logo.style.transform = "perspective(550px) rotateY(" + val + "deg) rotateX(" + valY + "deg)";
}

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