跨浏览器问题：transform: 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 中对此进行了测试并且它有效。 :)

跨浏览器问题：transform: rotateX() – JS + CSS

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

javascript

css

cross-browser