How to apply transform only in the parent element?

Question

I have 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>

This code contains the

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

which apply to child element player_controls,a tags.

So can do something like not affect the child element?

I tried to remove transform from player_controls

#mydiv .player_controls{transform:''}

Answer 1

Child elements will always get affected by transform on the parent element. This is not something that a child inherits and hence it cannot be over-ridden by using transform: ' ' or transform: none on the child. One way to counter it would be to apply the reverse transform on the child. Here, since the scale shouldn't affect the child, the inverse of the parent's scale should be applied to it.

The scaleX on parent is 0.972 and so the scaleX on child should be 1/0.972 (inverse) which is 1.028. Similarly for scaleY it shouldbe 1/0.401 which is 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>

---

If for whatever reason you are unable (or unwilling) to apply the reverse transform on the child element then you'd have to change your structure and make the child element a sibling element.

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