我在计算绕 x 轴旋转的 div 的子 div 的最佳旋转角度时遇到了问题。
为了使其更容易理解,我快速绘制了我所拥有的内容:
在一个以vh表示的可配置透视(容器)的场景中,我有一个DIV元素(父DIV),它作为子div元素(子DIV)的定位矩形,这个父div在X轴上倾斜一个角度,这个角度也是可配置的。
我的目标是将子 div 直接显示为面向屏幕(顶部/底部/右侧/左侧边缘与屏幕的顶部/底部/右侧/左侧边缘平行),并且形状为正方形(宽度=高度),因此计算 X 轴上的负旋转角度,使得子 div 像我想要的那样是直的,但是经过多次不成功的尝试和计算(我数学不太好,年纪很大了,记不清上学了...)我没有得到适用于所有类型的父矩形的透视和倾斜角度设置的结果...
我以为我只需要做父级的反向角度,即父级角度= 50 度,子级角度= -50 度,但遗憾的是它不起作用......经过一些测试,我发现 perspective 属性的值对子 div 的渲染也有影响...
为了说明我想要做什么,我的项目的某些屏幕: 这个屏幕的宽度非常好,父级 57 度/子级 -33 度,子级还有一个 scaleY(1.6),否则它就不是正方形,但如果我改变视角或角度,它就会变糟...
这个一点都不好,场景规模较小,我的子 div 不是直的,同时使用相同的错误公式来计算 rotateX 角度...
任何能帮助我的想法都将受到欢迎!
(附言:抱歉我的英语不好...不是我的母语)
编辑: 做了一个片段来简化并显示我的问题:
#scene {
position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
width: 400px; height: 300px; perspective: 60vh; overflow: hidden; }
#recp {
position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #393;
transform: rotateX(50deg); transform-origin: bottom; backface-visibility: hidden;
transform-style: preserve-3d; perspective: 60vh; }
#recp > div {
position: absolute; width: 20%; height: 80px; background: #999;
transform: rotateX(-25deg); transform-origin: bottom;
font-size: 48px; text-align: center; line-height: 80px; }
#recp > div#elt1 { left: 0; top: 0; }
#recp > div#elt2 { left: 40%; top: 40%; }
#recp > div#elt3 { left: 80%; top: 60%; }
<div id="scene">
<div id="recp">
<div id="elt1">1</div>
<div id="elt2">2</div>
<div id="elt3">3</div>
</div>
</div>
编辑 2: 经过一些测试和阅读,我明白只有角度不足以解决我的问题……父 div 的视角对于子 div 的良好渲染也很重要,实际上我放置的值与容器视角相同,但我认为这是错误的,这必须是与定位矩形(父 div)本身相对应的值。因此,问题仍然是使用哪个公式来计算子 div 上的正确角度和父 div 上的正确视角……
编辑3: 通过反复试验,并且在没有真正理解我正在做的事情的数学逻辑的情况下(嗯......)我意识到如果我保持相同的视角并应用一个等于父 div 角度一半的角度(负数),我几乎很好,给予或减少几个像素...我更新了代码片段。
也许我需要为父 div 设置另一个透视值并达到像素完美,或者我对角度除以 2 的假设不正确,我承认我对这些数学很迷茫......
还有 div 的高度,我有一个 JS 例程,它遍历我的子元素并分配一个等于图像宽度的像素高度,以确保它是正方形(宽度以百分比表示,以满足网格上的对齐需求),但渲染时图像根本不是正方形的......
编辑 4: 使用 retain-3d 更新代码片段(感谢@Temani Afif)在容器上添加了 4/3 的 W/H 比,因为我的项目场景具有这个纵横比。
正如您所说,事物在屏幕上的显示方式很大程度上取决于观察者所站的位置。
幸运的是,不需要自己进行复杂的计算,CSS 可以“思考” 3D。
你所拥有的是一片平原(草地),上面垂直坐着 3 个孩子。
因此,请按照您想要的方式放置它们。此代码片段所做的一点计算是计算出如果它们平放,它们的底部在哪里以及顶部在哪里。如果您知道它们的高度,这很简单 - 如果矩形的高度不同,您可能也希望将其设为变量。
然后将整个 3D 物体旋转 90 度 - 例如将草平放。
解决此问题的简单方法是从父 div 中移除子元素,然后将其添加到父 div 的顶部。这样就无需处理倾斜的 div。