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

Question

我正在执行CSS转换：在父级上旋转，但是希望能够对某些子级取消此效果-是否可以不使用反向旋转？

反向旋转确实有效，但是会影响元素的位置，并且可能会对性能产生负面影响（？）。无论如何，它看起来都不是干净的解决方案。

我尝试了这个问题的“transform：none”建议，以防止孩子继承转换css3，但它根本行不通-

Answer 1

我相信您将需要使用第二个子元素来伪造它，该规范似乎并没有允许您想要的行为，并且我可以理解为什么子元素的位置必须受到对其变换的影响。父母

这不是最优雅的解决方案，但是我认为您正在尝试做规范永远不会允许的事情。看看下面的小提琴为我的解决方案：

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