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

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 都正确渲染了，但是下面的子 div 仍然变形了。

我在这里错过了什么？

Answer 1

innerElement (childElement) 在 3D 旋转时无法通过在 -ve deg 中旋转回来保持初始状态。

二维旋转时有效

但是您可以尝试 transform-style: preserve-3d 以查看 3D 中的形状，当使用 Z 坐标旋转时效果也保持形状而不是仅显示在 [=19 中=].

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

You can try to remove the transform-style: preserve-3d and see the effect

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

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

Make child element unaffected by rotation of parent element

html

css

rotation

transform