防止子类继承转换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

这是我的工作。

我对儿童使用了相反的过渡。然后是稳定的

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

Answer 2

照例。设置"transform: none"为所有子元素

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

Answer 3

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

Answer 4

首先，您可以通过在parent中设置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>

参见:css -如何防止子类继承3d转换CSS3?-栈溢出

Answer 5

在大多数情况下，这应该是一个通用规则。

您可以将相同的规则应用于其他转换方法。

.parent {
  transform: rotate(-90deg);
}
.parent > * {
  /* to cover elements like <span> */
  display: block; 
  transform: rotate(90deg);
}