跨浏览器-问题:转换: rotateX() - JS + CSS

Question

我在这里写了这个脚本：https://jsfiddle.net/g130hqv4/2/

，这就是应该发生的事情：，我将光标移动到页面上，页面中间的div稍微跟随光标的位置，然后旋转到那个方向。(也见截图。)

Screenshot-1: Cursor is in the middle of the page:

Screenshot-2: Cursor is in the upper left corner:

​

在我做这个的时候，我使用了Safari，现在我意识到它只在Safari中工作，我还测试了Opera和Chrome，div按预期移动，但它不旋转。我认为问题必须是：CSS3 3D Transforms或：perspective: 500;，但是我检查了CanIUse.com，并且支持它，到底怎么回事？

这是我的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

赫里卡！我发现了问题：

我将这个：perspective: 500;更改为：perspective: 500px;

我再次在Safari、Opera和Chrome中测试了这一点，它也能工作。:)