запретить дочерним элементам наследовать преобразование css3

У меня есть 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 масштабируется до, но я хотел бы сохранить изображение в исходном размере.

Любая помощь приветствуется.

31
задан joopmicroop 11 March 2013 в 10:23
поделиться