Html 为什么透视图不是'；更新某些样式时，是否不会给出相同的结果？

我有两个带3d变换（旋转）的盒子。每个都有几乎相同的值，一个透视图看起来不错，另一个有点错误，但仍然有一些正确的透视图

顶部的第一个长方体没有突出，但它还有透视图。此外，容器的3°角更大200%

第二个框可以产生漂亮的3d效果

在这里，我举了一个我试图解释的例子

$（“.eye”）。在（'click'，函数（）{
$（'.man'）.toggleClass（'open'）；
})

*{填充：0；边距：0；}
.eye{padding:6px 8px；}
.宇宙{
背景：rgb（0.255/0.3）；
位置：绝对位置；
身高：100%；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.黑暗{
背景：rgb（02550/0.3）；
宽度：25%；
身高：25%；
}
.上帝{
背景：rgb（2550/0.3）；
变换样式：保留-3d；
变换：透视（800px）；
}
先生{
位置：绝对位置；
变换原点：左上角；
过渡：1s全线性；
} 
先生，开门{
变换：旋转（-60度）；
}
.生活{
背景：rgb（255 0/0.36）；
宽度：25vw；
高度：25vh；
}
不，上帝{
身高：100%；
}
不，伙计{
位置：相对位置；
}
是的，上帝{
身高：200%；
}

除非有什么东西动了，否则什么也不会发生。
打开
除非有什么东西动了，否则什么也不会发生。
打开
除非有什么东西动了，否则什么也不会发生。

每个都有几乎相同的值，一个透视图看起来很好

不，它们没有相同的值。一个是使用

position:absolute

，另一个是

position:relative

，这有很大的区别。如果您检查

god

元素，您会注意到，当使用产生问题的

位置：绝对

（第一种情况）时，其高度为0

下面是一个简化的代码，可以更好地显示您的问题：

.box{
显示：内联块；
垂直对齐：顶部；
宽度：100px；
透视图：200px；
位置：相对位置；
利润率：20px；
背景：蓝色；
}
.box>div{
位置：相对位置；
填充：10px；
背景：红色；
颜色：#fff；
过渡：1s全线性；
变换原点：左上角；
}
正文：悬停框>div{
变换：旋转（-40度）；
}

这里有一些文字
这里有一些文字

“一种观点看起来不错，另一种观点有点错误”请解释为什么有点错误，以及哪一种是正确的which@j08691顶部的第一个盒子没有突出。是的，我知道它可以通过添加

。上帝{身高：100%；}

来固定，也可以通过取出男人的位置

。男人{/*位置：绝对*/}

-你说的是：

[解释起来有点复杂]

-让我头疼的是解释为什么它会从顶部开始产生效果，或者把整个顶部作为一个起点，是的，因为它没有设置父级高度，希望我能解释得更多。真的希望有人知道答案或者有一些css 3d转换文档♥@ChocoXXL都是关于数学的，如果你愿意，我可以添加更复杂的解释。元素的大小在处理透视图时很重要。不同的大小，不会给出不同的透视图是的，我想读一个数学复杂的答案，我更新了我的示例，添加了一个200%的父容器，这对数学内容来说真的更有意义这里，缺少X轴或X轴为0。@ChocoXXL ok将在我有时间后更新。同时，您可以开始查看这里：我将从那里选择大部分信息（这是官方说明）@ChocoXXL添加了更多详细信息