防止孩子继承转化css3 [英] prevent children from inheriting transformation css3

问题描述

我有一个 div 我是tranforming（缩放和翻译），但在 div 另一个 div 。现在我会看到内部 div isnt受其父的转换影响，换句话说。我想要内部的 div 不像他的父母那样缩放。

以下是html：

 < div id = rightection> 
< div class =top>< / div> 
< div class =middle> 
< div class =large> 
< img src =assets / images / rightpanel_expanded.pngalt =maptitle =map/> 
< / div> 
< / div> 
< div class =bottom> 
< p>检查您的朋友是否会参加！< / 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）
} 
  

$ b b

所以问题是，当我缩放 #rightsection 时， img

解决方案

div>

  .parent {position：relative;背景颜色：黄色; 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变换：旋转（-30deg）; -o-transform：rotate（-30deg）; -ms-transform：rotate（-30deg）; transform：rotate（-30deg）;}  

 < div class =parent> < div class =child>< / div>< / div>  

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.

解决方案

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

这篇关于防止孩子继承转化css3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！