javascript - Cross-Browser-Problem: transform: rotateX() – JS + CSS

Question

I wrote this script here: https://jsfiddle.net/g130hqv4/2/

This is what's supposed to happen: I move the cursor across the page and the div in the middle of the page slightly follows the position of the cursor and rotates into that direction. (Also see screenshots.)

Screenshot-1: Cursor is in the middle of the page: Screenshot-2: Cursor is in the upper left corner:

While I was working on this, I used Safari and now I realised that it only works in Safari, I also tested Opera and Chrome and the div moves around as expected but it does not rotate. I though the problem had to be: CSS3 3D Transforms, or: perspective: 500;, but I checked CanIUse.com and it's all supported, what's going on?

–––––––––––

This is my JS:

var overlayDiv = document.querySelector(".hello");

var moveDivMaxX = undefined;
var moveDivMaxY = undefined;

var viewport_center = {
    x: undefined,
    y: undefined
};

var mouse = {
    x: undefined,
    y: undefined
};

var differenceX = undefined;
var differenceY = undefined;

var moveDivX = undefined;
var moveDivY = undefined;

// tilt START
var tiltX = undefined;
var titlY = undefined;
    
var MaxTiltX = 10;
var MaxTitlY = 10;
//tilt END

function load() {
    moveDivMaxX = window.innerWidth * 0.08;
    moveDivMaxY = window.innerHeight * 0.08;
    
    viewport_center.x = window.innerWidth / 2;
    viewport_center.y = window.innerHeight / 2;
}

window.addEventListener('mousemove', function(e) {
    mouse.x = e.x;
    mouse.y = e.y;
    
    differenceX = viewport_center.x - mouse.x;
    differenceX = differenceX * -1;
    
    differenceY = viewport_center.y - mouse.y;
    differenceY = differenceY * -1;
    
    var moveDivXinPercent = differenceX * 100 / viewport_center.x;
    moveDivX = moveDivMaxX / 100 * moveDivXinPercent;
    
    var moveDivYinPercent = differenceY * 100 / viewport_center.y;
    moveDivY = moveDivMaxY / 100 * moveDivYinPercent;
    
    
    var centerDivX = viewport_center.x - (document.querySelector(".hello").clientWidth / 2);
    var centerDivY = viewport_center.y - (document.querySelector(".hello").clientHeight / 2);
    
    overlayDiv.style.left = centerDivX + moveDivX + "px";
    overlayDiv.style.top = centerDivY + moveDivY + "px";
    
    // Tilt hello START
    tiltX = MaxTiltX / 100 * moveDivYinPercent * -1;
    titlY = MaxTitlY / 100 * moveDivXinPercent;
  
    overlayDiv.style.transform = "rotateX(" + tiltX + "deg) rotateY(" + titlY + "deg)";
    // Tilt hello END
})

window.onresize = load;
load();

Answer 1

Heureka! I found the problem:

I changed this: perspective: 500; to this: perspective: 500px;

I, again, tested this in Safari, Opera and Chrome and it works. :)