Question

-webkit-transform我遇到了一个奇怪的问题。如果我使用perspective和rotateX来使元素“翻转”，如果元素足够高，则它会在某个角度闪烁或不渲染。

我已经设置了jsFiddle demo来说明问题。左右移动鼠标以旋转矩形。

当元素高400像素时，一切似乎都能正常工作。
点击“4000”使元素高4000像素。 文字在某个范围内停止更新，呈现为闪烁。
点击“40000”使元素40000px高。它在小角度下渲染得很好，但在80度左右完全消失。

这里发生了什么？有解决方法还是我应该提交WebKit错误？

（注意：我在OS X上的Safari和Chrome中都看到了这种行为。）

Answer 1

此代码的问题出在CSS3 perspective属性中。当元素高度为4000像素或更高时，当它靠近屏幕时会消失，因为它距离仅为500像素（使用perspective属性定义。
在那里，如果元素更高，元素应该更远。

我根据元素高度制作了一些if语句来获取不同的视角：

if (document.getElementById("m2").offsetHeight == 400) {
    document.getElementById("m2").style.webkitTransform = "perspective(500) rotateX(" + (e.clientX / 5) + "deg)";
}

if (document.getElementById("m2").offsetHeight == 4000) {
    document.getElementById("m2").style.webkitTransform = "perspective(5000) rotateX(" + (e.clientX / 5) + "deg)";
}

if (document.getElementById("m2").offsetHeight == 40000) {
    document.getElementById("m2").style.webkitTransform = "perspective(50000) rotateX(" + (e.clientX / 5) + "deg)";
}

-webkit-transform的闪烁/渲染问题

1 个答案: