我在构建简单的 CSS 过渡时遇到了问题。
我有我的 body 元素，它唯一的子元素是一个 div，位置是绝对的。
在 div 中，我在 hover 伪类上插入了一个带有简单 3d 过渡的矩形:transform: rotateX(90deg)，然后我想在父元素中设置一个perspective样式，以使其看起来更好。
当我在 body 中设置一个 perspective 时，过渡正常工作:它创建了透视效果并且看起来不错。但是 - 问题就在这里 - child 失去了绝对位置(至少在 Chrome 中)。
我创建了一个 codepen example ，您可以注释掉 body 样式，这将应用绝对位置。
当 perspective 被设置时，div 也失去了它的蓝色背景，但我认为这是因为它的高度变成了 0。
这是一个错误吗？我该如何解决？
谢谢
最佳答案
遇到了完全相同的问题，非常奇怪的行为。为 body 添加透视会引入奇怪的怪癖，我的方法是在内部创建一个虚拟的“ body ”容器，就像 body 一样。
而不是像
<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>
关于css - 如果 body 有透视，则 "position: absolute"在 child 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46848225/