CSS 防止孩子继承转换css3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7045140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
prevent children from inheriting transformation css3
提问by vincent
I have a divthat i'm tranforming (scale and translate), but inside that divi have another div. Now i would to see that the inner divisnt affected by the transformation of its parent, in other words. I would like for the inner divto not scale like his parent does.
我有一个div我正在转换（缩放和翻译），但在里面div我有另一个div. 现在我会看到内部div不受其父级转换的影响，换句话说。我希望内心div不要像他的父母那样缩放。
Here is the html:
这是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:
这是我的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 imggets scaled to, but i would like to keep the image on its original size.
所以问题是，当我缩放时#rightsection，img会被缩放到，但我想保持图像的原始大小。
Any help is appreciated.
任何帮助表示赞赏。
回答by Webars
Do as usual. Set "transform: none" to all of children.
照常做。为所有孩子设置“转换：无”。
.children1,
.children2,
.childrenN {
-moz-transform: none;
-webkit-transform: none;
-o-transform: none;
-ms-transform: none;
transform: none;
}
回答by Sankareswari Karttikeyan
.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>回答by feng zhang
First you can make the children of the parent positioned in the 3D-space by set transform-style: preserve-3d;in parent, then you can apply transform-functions in reverseorder of parent to children elements that want to keep front.
首先，您可以通过transform-style: preserve-3d;在父元素中设置将父元素的子元素定位在 3D 空间中，然后您可以按照父元素的相反顺序将变换函数应用于想要保持在前面的子元素。
.parent {
transform: rotateX(33deg) rotateY(66deg) rotateZ(99deg);
/* Notice! You should make the children of the parent positioned in the 3D-space. */
transform-style: preserve-3d;
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 4px solid darkblue;
}
.child {
/* Notice! You should apply the opposite order of rotations (transform functions) from the parent element. */
transform: rotateZ(-99deg) rotateY(-66deg) rotateX(-33deg);
position: absolute;
width: 80px;
height: 80px;
background: aqua;
}<div class="parent">
<div class="child">
I'am a child want keep front.
</div>
</div>See: css - How to prevent children from inheriting 3d transformation CSS3? - Stack Overflow
回答by Jasim Muhammed
Here is it what worked for me..
这对我有用..
I used opposite transition for children. Then it was stable
我为孩子们使用了相反的过渡。然后就稳定了
.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);
}
