阻止孩子继承转换css3

我有一个div，我转变（规模和翻译），但在里面div我有另一个div。换句话说，现在我会看到内部的div没有受到其父变换的影响。我想内在div不像他的父母一样缩放。阻止孩子继承转换css3

下面是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被缩放，但我想保持原始尺寸的图像。

任何帮助表示赞赏。

来源

2011-08-12 vincent

也许你应该移动内部的div出外层div的。 – BoltClock

您可以重新创建[jsFiddle]（http://jsfiddle.net）上的所有内容吗？您的图片可以来自http://dummyimage.com/。 – thirtydot

我重新创建了它，它可以在这里找到：jsfiddle.net/ecbVH。正如你所看到的图像应该是578x329，但它是更大的wahaay，只是悬停在元素上看到结果 – vincent

照常做。为所有的孩子设置“transform：none”。

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

来源

2011-08-12 21:49:40 Webars

这可以防止嵌套的变换，不是吗？ – BoltClock

是的，你是对的。 – Webars

这应该如何工作？我无法在绝对或相对定位的孩子身上重现这一点。以下是我的尝试：http://jsfiddle.net/NPC42/XSHmJ/ – NPC

这里是为了我什么工作..

我用于儿童对面的过渡。然后，它是稳定的

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

来源

2013-03-23 15:42:47

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

来源

2015-04-10 10:46:59

这并不妨碍继承，它只是用双重否定符号来取消它。 – JackHasaKeyboard

阻止孩子继承转换css3

回答

相关问题