防止孩子在CSS中继承旋转变换

我相信你需要使用第二个孩子伪造它,规范似乎不允许你想要的行为,我可以理解为什么子元素的位置必须受到变换的影响家长.

这不是最优雅的解决方案,但我认为你正在尝试做一些规范永远不会允许的事情.看看我的解决方案的以下小提琴：

.parent {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 70px;
}
.child1 {
  BACkground-color: yellow;
  width: 200px;
  height: 150px;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.child2 {
  position: absolute;
  top: 30px;
  left: 50px;
  BACkground-color: green;
  width: 70px;
  height: 50px;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>