JSFiddle - React, Tailwind, and code Playground

by Marius Jopen

HTML

<div id="transformation-area">
test
</div>

CSS

#transformation-area {
  height: 400px;
  width: 400px;
  background: yellow;
}

#tracking-area {
  height: 400px;
  width: 400px;
  background: yellow;
}

JavaScript

var maxRotationDegreesX = 10,
    maxRotationDegreesY = 10,
    perspectivePx = 600;
$(window).load(function() {
    var t = $("#tracking-area").offset().left,
        e = $("#tracking-area").offset().top,
        i = $("#tracking-area").width() / 2,
        n = $("#tracking-area").height() / 2,
        s = t + i,
        o = e + n;
    $("#tracking-area").on("mousemove", function() {
        var t = event.clientX - s,
            e = event.clientY - o,
            a = t * maxRotationDegreesX / i,
            r = -e * maxRotationDegreesY / n,
            l = "perspective(" + perspectivePx + "px) rotate3d(1, 0, 0, " + r + "deg) rotate3d(0, 1, 0, " + a + "deg)";
        $("#transformation-area").css("-webkit-transform", l), $("#transformation-area").css("-moz-transform", l), $("#transformation-area").css("-ms-transform", l), $("#transformation-area").css("-o-transform", l), $("#transformation-area").css("transform", l)
    })
});