csscss-transforms

Prevent children from inheriting rotate transformation in CSS


I am performing a CSS transform: rotate on a parent, yet would like to be able to negate this effect on some of the children - is it possible without using the reverse rotation?

Reverse rotation does work, but it affects the position of the element, and it may have a negative performance impact (?). In any case, it doesn't look like a clean solution.

I tried the "transform: none" suggestion from this question prevent children from inheriting transformation css3, yet it simply doesn't work - please see the fiddle here: http://jsfiddle.net/NPC42/XSHmJ/


Solution

  • I believe that you are going to need to fake it using a second child, the specification does not seem to allow for the behavior you would like, and I can understand why the position of a child element has to be affected by a transform to its parent.

    This isn't the most elegant of solutions, but I think you're trying to do something that the specification is never going to allow. Take a look at the following fiddle for my solution:


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