gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 07:07:14 25 4
gpt4 key购买 nike

我正在使用 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>

左右按钮以 20 度为增量将 transform:rotatey 应用到 #hallway,前进和后退按钮应用 transform:translate等..

在 Chrome 和 Firefox 中,“房间”工作得很好。然而在 Safari 中它几乎是完全不可见的,只有在场景旋转或移动时才会显示微小的随机墙壁碎片。我知道 Safari 必须以不同于主流浏览器的方式处理一些 3D CSS 效果,但我已经经历了好几次,我无法弄清楚它是哪种效果。有什么想法吗?

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

最佳答案

简单修复下面的css

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

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

<body>不应该给 transform-style 属性,我认为这会导致场景在 safari 中消失。

希望对你有帮助:)

关于javascript - 3D CSS 场景无法在 Safari 中正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51504189/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com