prevent children from inheriting transformation css3

Question

I have a div that i'm tranforming (scale and translate), but inside that div i have another div. Now i would to see that the inner div isnt affected by the transformation of its parent, in other words. I would like for the inner div to not scale like his parent does.

Here is the html:

<div id="rightsection">     <div class="top"></div>     <div class="middle">           <div class="large">             <img src="assets/images/rightpanel_expanded.png" alt="map" title="map"/>           </div>     </div>     <div class="bottom">         <p>Check if your friends are going!</p>     </div> </div> 

Here is my css:

#rightsection:hover {     -moz-transform:scale(2.16,2.8) translate(-80px,-53px);     -webkit-transform:scale(2.16,2.8) translate(-80px,-53px);     -o-transform:scale(2.16,2.8) translate(-80px,-53px);     -ms-transform:scale(2.16,2.8) translate(-80px,-53px);     transform:scale(2.16,2.8) translate(-80px,-53px) } 

So the problem is, when i scale #rightsection, the img gets scaled to, but i would like to keep the image on its original size.

Any help is appreciated.

Answer 1

Do as usual. Set "transform: none" to all of children.

.children1, .children2, .childrenN {     -moz-transform: none;     -webkit-transform: none;     -o-transform: none;     -ms-transform: none;     transform: none; } 

Answer 2

Here is it what worked for me..

I used opposite transition for children. Then it was stable

.logo {     background: url('../images/logo-background.png') no-repeat;     width: 126px;     height: 127px;     margin-top:-24px;     z-index: 10;     display: block;  } a.logo span{     display: block;     width: 126px;     height: 127px;     background: url('../images/logo-bismi.png') no-repeat;     z-index: 20;     text-indent: -9999px;     text-transform: capitalize;     -webkit-transition: -webkit-transform 0.4s ease-out;     -moz-transition: -moz-transform 0.4s ease-out;     transition: transform 0.4s ease-out;      } a.logo:hover span{     -webkit-transform: rotateZ(-360deg);     -moz-transform: rotateZ(-360deg);     transform: rotateZ(-360deg); } a.logo {     -webkit-transition: -webkit-transform 0.4s ease-out;     -moz-transition: -moz-transform 0.4s ease-out;     transition: transform 0.4s ease-out;         } a.logo:hover{     -webkit-transform: rotateZ(360deg);     -moz-transform: rotateZ(360deg);     transform: rotateZ(360deg);  }