如何仅在父元素中应用变换？

Question

如何仅在父元素中应用变换？

4

我有HTML

<div id="mydiv" style="color: white; height: 1080px; width: 1920px; transform: translate(-27px, -323px) scale(0.972, 0.401);">
    <div class="player_controls">
        <a class="right carousel-control" href="#" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 
    </div>
</div>

这段代码包含以下内容：

transform: translate(-27px, -323px) scale(0.972, 0.401);

这适用于子元素 player_controls 和 a 标签。

那么能否做出一些不影响子元素的操作呢？

我尝试从 player_controls 中移除 transform 属性。

#mydiv .player_controls{transform:''}

- Bhumi Shah

你需要反转任何不必要的变换。 - Harry

不太明白你的意思。我只是不想对子元素应用变换缩放。 - Bhumi Shah

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harry · Accepted Answer

子元素始终会受到父元素变换的影响。这不是子级继承的内容，因此无法通过在子元素上使用 transform: ' ' 或 transform: none 来覆盖。解决方法之一是对子元素应用反向变换。在这里，由于缩放不能影响子元素，因此应将父元素的缩放的反向应用于它。

父元素的scaleX为0.972，因此子元素的scaleX应为1/0.972（反向），即1.028。同样，对于scaleY，应为1/0.401，即2.493。

#mydiv,#mydiv2 {
  height: 200px;
  width: 200px;
  background: red;
  transform: translate(27px, 23px) scale(0.972, 0.401);
}

#mydiv .player_controls {
  transform: scale(1.028, 2.493);
  transform-origin: left top;
}

<h2>With reverse transform on child</h2>
<div id="mydiv">
  <div class="player_controls">
    <a class="right carousel-control" href="#" data-slide="next"><span class="glyphicon glyphicon-chevron-right">Some icon</span>Some text</a> 
  </div>
</div>
<h2>With no reverse transform on child</h2>
<div id="mydiv2">
  <div class="player_controls">
    <a class="right carousel-control" href="#" data-slide="next"><span class="glyphicon glyphicon-chevron-right">Some icon</span>Some text</a> 
  </div>
</div>

如果由于某种原因你无法（或不愿意）对子元素应用反向转换，则必须更改结构并将子元素变成同级元素。

.container {
  position: relative;
}
#mydiv {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 200px;
  width: 200px;
  background: red;
  transform: translate(27px, 23px) scale(0.972, 0.401);
  transform-origin: 0px 0px;
}
.player_controls {
  position: absolute;
  top: 23px;
  left: 27px;
}

<div class="container">
  <div id="mydiv">
  </div>
  <div class="player_controls">
    <a class="right carousel-control" href="#" data-slide="next"><span class="glyphicon glyphicon-chevron-right">Some icon</span>Some text</a> 
  </div>
</div>