逼真的 CSS 透视图环顾四周答案

【问题标题】：Realistic CSS perspective look around逼真的 CSS 透视图环顾四周
【发布时间】：2023-03-13 20:26:01
【问题描述】：

我在CSS 有一个类似 3d 的房间，并使用 jQuery 添加了环顾鼠标移动效果，perspective-origin 和 放大/缩小与 mousewheel.js 一起改变 perspective 数量的效果。

但这不是很现实。这不像是我们环顾四周，只是房间看起来变形了。

所以我尝试在我的侧壁上使用transform: translateY() 来纠正这个问题，但这不是我所期望的。

你有什么解决办法吗？谢谢！

PS：对不起我的英语，我是法国人；）

【问题讨论】：

很难理解你所说的“现实”是什么意思。 CSS 变换并不是为了让事物看起来更逼真。你有任何你想要的效果的例子吗？
我认为你必须在 Z 轴上平移你的房间： $("section .room").css({ transform: 'translateZ('+ (value) +'px)' in鼠标滚轮事件
感谢 Marouen，我尝试了整个
，但房间超出了屏幕，但我会立即尝试使用 .room。 @oatmealsnap：类似于 FPS 游戏。我知道这不会很现实，而且我会滥用 CSS 3D，我只是想要一点交互性:)
@MarouenMhiri 放大/缩小效果很好！现在我必须找到解决鼠标移动时行为的方法。
oui mon ami c'est pas facile ton truc！ au fait il faut combiner mousewheel avec mousemove。 Peut être en essayant d'intègrer mousemove dans mousewheel ? :-/

【解决方案1】：

做到了！有很多3d transform。如果您想查看差异和解决方案，请查看小提琴；）

BEFORE | AFTER

不适用于 Firefox :( 可以使用 Opera、Chrome...我找不到关于 3d transforms 的 Firefox 破解，因为我认为这是问题所在。

帮助:)

【讨论】：