子供が変容を継承するのを防ぐcss3

Question

私はを持っていますが、私はトランスフォームしていますが、その中にはdivがあります。divです。今私は、内部のdivが、その親の変換によって影響を受けていない、言い換えればわかります。私は内部がdivのように彼の親のようにスケールしないようにしたいと思います。ここで

は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> 

は私の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) 
} 

だから、問題は、私は#rightsectionをスケーリングするとき、あるimgがにスケーリングされますが、私は維持したいと思いますその元のサイズの画像。

何か助けていただければ幸いです。

Answer 1

いつも通り。すべての子に "transform：none"を設定します。ここで

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

Answer 2

それは私のために働いていたものです。..

は私が子供のための逆の移行を使用していました。そして、それはたぶん、あなたが外側のdivのうち、内側のdiv要素を移動する必要があります

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