Question

我正在执行CSS转换：在父级上旋转，但希望能够对某些孩子否定这种影响 - 是否可以不使用反向旋转？

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

我尝试了这个问题prevent children from inheriting transformation css3中的“transform：none”建议，但它根本行不通 - 请看这里的小提琴：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>

Answer 3

如果要在不影响子节点的情况下对父节点应用变换效果，可以简单地为父节目的伪元素设置动画，如下所示：

.parent {
            display: inline-block;
            position: relative;
        }
        .parent::before {                
            content: '';
            background: #fab;

            /* positioning / sizing */
            position: absolute;
            left:0;
            top:0;                                

            /* 
                be aware that the parent class have to be "position: relative"
                in order to get the width/height's 100% working for the parent's width/height.                
            */
            width: 100%;
            height: 100%;

            /* z-index is important to get the pseudo element to the background (behind the content of parent)! */
            z-index: -1;
            transition: .5s ease;
            /* transform before hovering */
            transform: rotate(30deg) scale(1.5);
        }

        .parent:hover::before {
            /* transform after hovering */
            transform: rotate(90deg) scale(1);
        }

这实际上对我有用。 JSFiddle

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

3 个答案: