1

我遇到了一个奇怪的问题-webkit-transform。如果我使用perspectiveandrotateX使元素“向上翻转”，如果元素足够高，它会闪烁或完全不渲染超过某个角度。

我设置了一个jsFiddle 演示来说明这个问题。左右移动鼠标来旋转矩形。

  • 当元素高度为 400 像素时，一切似乎都正常。

  • 单击“4000”使元素高 4000 像素。文字在一定范围内停止更新，呈现闪烁。

  • 单击“40000”使元素高 40000 像素。它在小角度渲染良好，但在大约 80 度时完全消失。

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

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

4

1 回答 1

3

此代码的问题在于CSS3 perspective属性。当元素高度为 4000px 或更高时，它会在靠近屏幕时消失，因为它只有 500px 距离（使用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)";
}
于 2012-04-18T13:00:04.177 回答