Css &引用；位置：绝对“；在一个孩子身上'；如果身体有透视力，它就不会工作_Css_Css Transitions_Transform_Webkit Perspective

Css &引用；位置：绝对“；在一个孩子身上'；如果身体有透视力，它就不会工作

css

Css &引用；位置：绝对“；在一个孩子身上'；如果身体有透视力，它就不会工作,css,css-transitions,transform,webkit-perspective,Css,Css Transitions,Transform,Webkit Perspective,我在构建一个简单的CSS转换时遇到了一个问题我有我的body元素，它唯一的子元素是一个位置为绝对的div 在div中，我在悬停伪类上插入了一个带有简单3d转换的矩形：transform:rotateX（90deg），我想在父元素中设置一个透视样式，以使它看起来更好当我在主体中设置透视图时，转换工作正常：它创建透视效果并且看起来很好。但是——问题就在这里——孩子失去了绝对位置（至少在Chrome中是这样）我创建了一个，您可以注释主体样式，这将应用一个绝对位置设置透视图时，div也会丢失蓝色

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

我有我的

body

元素，它唯一的子元素是一个位置为绝对的

div

在

div

中，我在悬停伪类上插入了一个带有简单3d转换的矩形：

transform:rotateX（90deg）

，我想在父元素中设置一个

透视

样式，以使它看起来更好

当我在主体中设置透视图时，转换工作正常：它创建透视效果并且看起来很好。但是——问题就在这里——孩子失去了绝对位置（至少在Chrome中是这样）

我创建了一个，您可以注释

主体

样式，这将应用一个绝对位置

设置透视图时，

div

也会丢失蓝色背景，但我认为这是因为它的高度变为0

是虫子吗？我怎样才能修好它

谢谢你

遇到了同样的问题，非常奇怪的行为。似乎给身体添加透视图会带来奇怪的怪癖，我的方法是在身体内部创建一个虚拟的“身体”容器，就像它是身体一样

而不是像

<html>
  <body style="perspective: 1000px">
    <div style="transform:rotate(10deg); position:absolute"></div>
  </body>
</html>

试一试

为什么不尝试将透视图应用于绝对定位的div（body的子对象），而不是应用于body本身？

<html>
  <body>
    <container style="perspective: 1000px">
      <div style="transform:rotate(10deg); position:absolute"></div>
    </container>
  </body>
</html>