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

Question

我执行CSS变换:旋转的父母,但希望能够否定一些孩子的这种效果 - 这可能不使用反转？

反向旋转确实有效,但它会影响元素的位置,并且可能会对性能产生负面影响(？).无论如何,它看起来不像一个干净的解决方案.

我试过这个问题的"转换:无"建议阻止孩子继承转换css3,但它根本不起作用 - 请看这里的小提琴:http://jsfiddle.net/NPC42/XSHmJ/

Answer 1

也许你必须这样写:

.child {
    position: absolute;
    top: 30px;
    left: 50px;
    background-color: green;
    width: 70px;
    height: 50px;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

检查这个更多http://jsfiddle.net/XSHmJ/1/

更新

你可以:after & :before为此起诉psuedo类.

检查这个http://jsfiddle.net/XSHmJ/4/

Answer 2

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

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

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