Prevent children from inheriting rotate transformation in CSS

Question

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/

score 12 · Answer 1 · edited May 14 '21 at 10:01

12

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 use:after & :before psuedo class for this.

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

edited May 14 '21 at 10:01

Community

1
1

answered Mar 01 '12 at 09:31

sandeep

91,313
23
137
155

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! – NPC Mar 01 '12 at 09:54
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! – NPC Mar 01 '12 at 12:59
Use full in my case. Thank you! – Zugor Mar 05 '20 at 08:33

score 9 · Accepted Answer · edited Dec 03 '20 at 15:11

9

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>

edited Dec 03 '20 at 15:11

Saiansh Singh

583
5
16

answered Mar 01 '12 at 09:51

michaelward82

4,706
26
40

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. – NPC Mar 01 '12 at 09:55
@michaelward82 the fiddle still is not updated. Updates change the url. – Fresheyeball Aug 23 '12 at 00:15
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 – damiano celent Oct 20 '16 at 12:24

score 4 · Answer 3 · edited Dec 04 '20 at 02:33

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

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. — NPC, Apr 09 '16 at 00:15

Prevent children from inheriting rotate transformation in CSS

3 Answers3

Linked