Question

我正在使用CSS transform3d和rotate3d在3D“房间”上工作，并使用按钮通过Javascript修改变换/旋转来移动和旋转场景。

结构的简化版本：

<body style="perspective:500px; transform-style:preserve-3d;">
    <div id="hallway">
        <div id="backwall" style="transform:translatez(2000px)"></div>
        <div id="ceiling" style="transform:rotatex(-90deg)"></div>
        <div id="left-wall" style="transform:rotatey(-90deg)"></div>
        <div id="right-wall" style="transform:rotatey(90deg)"></div>
        <div id="floor" style="transform:rotatex(90deg)"></div>
    </div>
    <div id="buttons"></div>
</body>

向左和向右按钮将transform:rotatey应用到#hallway，以20度为增量，向前和向后按钮将应用transform:translate等。

在Chrome和Firefox中，“房间”可完美运行。但是，在Safari中，它几乎是完全不可见的，当旋转或移动场景时，只显示很小的墙壁随机碎片。我知道Safari必须处理与主流浏览器不同的 some 3D CSS效果，但是我已经经历了好几次了，我无法弄清楚它是哪种效果。有什么想法吗？

该网站位于http://vanderstank.church/hallwayway.html

Answer 1

只需修复以下CSS

* { box-sizing:border-box; transform-style:preserve-3d; }

至

body > * { box-sizing:border-box; transform-style:preserve-3d; }

<body>不应该提供transform-style属性，我认为这会导致Safari中的场景消失。

希望有帮助：）

3D CSS场景无法在Safari中正确显示

1 个答案: