Prevent children from inheriting rotate transformation in CSS

css transform: rotate
css prevent transform
css transform-origin
css transform parent but not child
css transform 3d
transform-style: preserve-3d ie
css rotate without transform
css transform inside transform

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/

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

This isn't the most elegant of solutions, but I think you're trying to do something that the spec 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>

css - prevent children from inheriting transformation css3, Do as usual. Set "transform: none" to all of children. .children1, .children2, .​childrenN { -moz-transform: none; -webkit-transform: none; -o-transform: none;  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 (?).

May be you have to write like this:

.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);
}

Check this for more http://jsfiddle.net/XSHmJ/1/

UPDATED

You can sue :after & :before psuedo class for this.

check this http://jsfiddle.net/XSHmJ/4/

Prevent children from inheriting rotate transformation in CSS, 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  The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. To better understand the transform property, view a demo. yes. Read about animatable Try it. JavaScript syntax: object .style.transform="rotate (7deg)" Try it. Browser Support.

If you want to apply transforming effects on a parent without affecting its children, you can simply animate a parent's pseudo-element like this:

.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);
        }

This actually worked for me. JSFiddle

Things to Watch Out for When Working with CSS 3D, I began playing with CSS 3D transforms as soon as I noticed support in CSS natural to use transforms to create 2D shapes and move/rotate them in 3D to This .helix element doesn't have any other styles (directly set or inherited) this and prevent children from breaking out of the plane of their parent. There is no such thing as a div having no style at all. It inherits its style from somewhere - if not from anything in your CSS then from something in the browser defaults. The only way to apply default styles to everything in the div is to specify those defaults in your CSS.

CSS transform property, 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  The transform-style property specifies how nested elements are rendered in 3D space. Note: This property must be used together with the transform property. To better understand the transform-style property, view a demo. The numbers in the table specify the first browser version that fully supports the property.

CSS Transforms Module Level 2, Rotate, skew, and scale three different <div> elements: div.a { transform: rotate(​20deg); } div.b { Syntax. transform: none|transform-functions|initial|inherit;  Inheritance also needs to be understood in this context — some CSS property values set on parent elements are inherited by their child elements, and some aren't. For example, if you set a color and font-family on an element, every element inside it will also be styled with that color and font, unless you've applied different color and font values directly to them.

offset-rotate, The transform is a 50° rotation about the vertical, Y axis. to an element to influence the rendering of its 3d-transformed children, giving to flat and prevent it from creating or extending a 3D rendering context. Inherited: no. The transform-style CSS property specifies whether the children of the element are positioned in the 3D-space or are flattened in the plane of the element. If flattened, the child elements will not exist on their own in the 3D-space. This property is only applied to child elements that have a transform property specified.

Comments
  • It looks like you didn't update the fiddle before sharing (it still shows my code), but I understand the idea. Thanks, it is not very clean, but still simple enough for me to like it :) If there is no better solution proposed, I'll 'accept' this answer.
  • @michaelward82 the fiddle still is not updated. Updates change the url.
  • I know I am very late to the party here, but this is a genius solution:-) Tried to replicate the reddit loader gif, finally got it to work. So, only th efirst child inherits the trnasforms fromt he parent if both childs are divs? Does it matter what elelemnt is used(block vc inline)?BTW this also works with keyframes.The first child does not need any css rules at all, it can be left blank.Thanks so much
  • This is what I meant by the reverse rotation. It makes the position of the child very non-obvious, so I can't really use this solution. Thanks for the help, though!
  • I like the :after solution, really cool, but will work only if the rotated element is a very simple object which can be "created" by pure CSS. Still, a very nice idea, may come in handy one day, thanks!
  • You are not rotating the parent, though, only a ::before element, which is basically another child and doesn't affect other children at all. Nice effect, though.