prevent children from inheriting transformation css3 - css

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

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

Answer 2

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 3

.parent {
position: relative;
background-color: yellow;
width: 200px;
height: 150px;
margin: 70px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.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);
}
<div class="parent">
<div class="child"></div>
</div>

Answer 4

First you can make the children of the parent positioned in the 3D-space by set transform-style: preserve-3d; in parent, then you can apply transform-functions in reverse order of parent to children elements that want to keep front.
.parent {
transform: rotateX(33deg) rotateY(66deg) rotateZ(99deg);
/* Notice! You should make the children of the parent positioned in the 3D-space. */
transform-style: preserve-3d;
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 4px solid darkblue;
}
.child {
/* Notice! You should apply the opposite order of rotations (transform functions) from the parent element. */
transform: rotateZ(-99deg) rotateY(-66deg) rotateX(-33deg);
position: absolute;
width: 80px;
height: 80px;
background: aqua;
}
<div class="parent">
<div class="child">
I'am a child want keep front.
</div>
</div>
See: css - How to prevent children from inheriting 3d transformation CSS3? - Stack Overflow

Answer 5

This should work as a general rule in most cases.
You can apply the same rule to the other transform methods.
.parent {
transform: rotate(-90deg);
}
.parent > * {
/* to cover elements like <span> */
display: block;
transform: rotate(90deg);
}