4

我在构建一个简单的 CSS 过渡时遇到了一个问题。

我有我的body元素，它的唯一子元素是div绝对位置。

在内部，我在悬停伪类div上插入了一个带有简单 3d 过渡的矩形： ，我想在父元素中设置一个样式以使其看起来更好。transform: rotateX(90deg)perspective

当我perspective在 body 中设置 a 时，过渡可以正常工作：它创建了透视效果并且看起来不错。但是 - 问题就在这里 - 孩子失去了绝对位置（至少在 Chrome 中）。

我创建了一个codepen 示例，您可以将body样式注释掉，这将应用绝对位置。

perspective设置时，div它也会失去蓝色背景，但我认为这是因为它的高度变为 0。

这是一个错误吗？我该如何解决？

谢谢

4

1 回答 1

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>
于 2019-03-30T00:29:10.777 回答