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

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仍然变形。

我错过了什么？

- Candleout

---

你正在进行三维方向的旋转。因此，现在它不仅仅通过负方向旋转就能工作了。 - Rana

你需要反转 rotation 的顺序，同时加上 -ve deg。就像父元素先旋转 X 再旋转 Z 一样，子元素需要先旋转 Z 再旋转 X。你可以尝试移除 transform-style: preserve-3d 看看效果。 - Rana

Answer 1

当通过以 -ve deg 旋转来回旋转时，无法使 innerElement（childElement）保持初始状态。

当旋转发生在2D平面上时，它是有效的。

但是，您可以尝试使用 transform-style: preserve-3d ，以便在沿 Z 坐标旋转时以 3D 效果显示形状并保留形状，而不仅仅在 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>

- Rana

---

谢谢！颠倒转换的顺序帮助我实现了我想要的结果。 - Candleout

欢迎，很高兴能帮助@Candleout。顺便问一下，你是如何处理被剪掉的部分的？ - Rana