防止孩子继承转换css3

Question

我有一个div我正在改变(缩放和翻译),但在里面,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;
}