使子元素不受父元素旋转的影响

Question

我有两个 div 元素：一个是旋转的父元素，另一个是我需要不受父元素旋转影响的子元素。

为了实现这一点，我尝试以与父元素相反的方向旋转子元素。这在某些情况下有效。例如，如果我像这样旋转元素...

.parent {
  transform: rotate(30deg);
}

.child {
 transform: rotate(-30deg);
}

... 子元素将显得笔直且不变形。但是如果我用 rotateX ...

旋转它们

.parent {
  transform: rotateX(30deg);
}

.child {
 transform: rotateX(-30deg);
}

...子元素看起来仍然相当扭曲。

实际代码同时使用 rotateX 和 rotateZ 以使父元素看起来是等距的。目前看起来是这样的：

.happy_parent {
  width: 100px;
  height: 100px;
  background-color: green;
  transform: rotate(30deg);
}

.happy_child {
  width: 50px;
  height: 50px;
  background-color: yellow;
  transform: rotate(-30deg);
}

.sad_parent {
  width: 100px;
  height: 100px;
  background-color: green;
  transform: rotateX(-60deg) rotateZ(45deg);
}

.sad_child {
  width: 50px;
  height: 50px;
  background-color: yellow;
  transform: rotateX(60deg) rotateZ(45deg);
}

<div class="happy_parent">
  <div class="happy_child"></div>
</div>

<div class="sad_parent">
  <div class="sad_child"></div>
</div>

请注意，上面的 div 都正确渲染了，但下面的 child-div 仍然失真。

我在这里错过了什么？

Answer 1

通过在-vedeg 中旋转回来，在 3D 中旋转时，不可能让 innerElement (childElement) 保持初始状态。

它会在 2D 中发生旋转时起作用。

但是您可以尝试transform-style: preserve-3d 以查看3D 中的形状在使用Z 坐标旋转时的效果，并保留形状而不是仅显示在2D 中。

在 3D 旋转中也必须颠倒旋转顺序

你可以试试去掉transform-style: preserve-3d看看效果

.happy_parent {
  width: 100px;
  height: 100px;
  background-color: green;
  transform: rotate(30deg);
}

.happy_child {
  width: 50px;
  height: 50px;
  background-color: yellow;
  transform: rotate(-30deg);

}

.sad_parent {
  width: 100px;
  height: 100px;
  background-color: green;
  transform: rotateX(-60deg) rotateZ(45deg);
  transform-style: preserve-3d;
}

.sad_child {
  width: 50px;
  height: 50px;
  background-color: yellow;
  transform: rotateZ(-45deg) rotateX(60deg);
}

<div class="happy_parent">
  <div class="happy_child"></div>
</div>
<br><br><br><br>

<div class="sad_parent">
  <div class="sad_child"></div>
</div>