如何仅在父元素中应用转换？ [英] How to apply transform only in the parent element?

问题描述

我有超文本标记语言

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

这适用于子元素PlayerControls，a标记。

这样做可以不影响子元素吗？

我尝试从Player_Controls中删除转换

#mydiv .player_controls{transform:''}

推荐答案

子元素始终受父元素上的转换影响。这不是子级继承的，因此不能通过在子级上使用transform: ' '或transform: none来覆盖它。解决这个问题的一种方法是对子对象应用反向变换。在这里，由于scale不应影响子项，因此应对其应用父项比例的倒数。

父对象上的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>

这篇关于如何仅在父元素中应用转换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！