CODEWITHSUNDEEP
csscss-transforms
NPC
NPC

Reputation: 1039

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/

Upvotes: 13

Views: 28030

Answers (3)

sandeep
sandeep

Reputation: 92843

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/

Upvotes: 12

jlang
jlang

Reputation: 1057

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

Upvotes: 4

michaelward82
michaelward82

Reputation: 4736

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>

Upvotes: 9

Related Questions