我在构建简单的CSS转换时遇到了问题。
我有我的body元素，其唯一的孩子是位置绝对的div。
在div里面，我在悬停的伪类上插入了一个简单的3d过渡矩形：transform: rotateX(90deg)，我想在父元素中设置一个perspective样式，以使其看起来更好。
当我在身体中设置perspective时，过渡正常：它创建透视效果并且看起来很好。但问题就在这里 - 孩子失去了绝对的位置（至少在Chrome中）。
我创建了一个codepen example，你可以评论body样式，这将适用绝对位置。
当perspective设置时，div也失去了蓝色背景，但我认为这是因为它的高度变为0。
这是一个错误吗？我该如何解决？
谢谢
进入这个完全相同的问题，非常奇怪的行为。似乎为身体添加透视引入了奇怪的怪癖，我的方法是在内部创建一个虚拟的“身体”容器，就像它是身体一样。
而不是像
<html>
<body style="perspective: 1000px">
<div style="transform:rotate(10deg); position:absolute"></div>
</body>
</html>
尝试
<html>
<body>
<container style="perspective: 1000px">
<div style="transform:rotate(10deg); position:absolute"></div>
</container>
</body>
</html>