Question

我在构建简单的CSS转换时遇到了问题。

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

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

当我在身体中设置perspective时，过渡正常：它会创建透视效果并且看起来很好。但问题就在这里 - 孩子失去了绝对的位置（至少在Chrome中）。

我创建了codepen example，您可以对body样式进行评论，这将应用绝对位置。

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

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

谢谢

Answer 1

遇到这个完全相同的问题，非常奇怪的行为。似乎为身体增加了视角会引入怪异的怪癖，我的方法是在体内创建一个虚拟的“身体”容器，使其看起来像是身体。

而不是类似的

<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>

＆＃34;职位：绝对＆＃34;如果身体有透视，孩子就不会工作

1 个答案: