親エレメントにのみトランスフォームを適用するには？

Question

私は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> 

このコードは、子要素player_controls、タグには適用され

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

が含まれています。

子供の要素に影響しないようなことができますか？

私は

#mydiv .player_controls{transform:''} 

Answer 1

子要素は常に親要素に対して変換の影響を受けてしまいますplayer_controlsから転換削除しようとしました。これは、子どもがを継承するものではないので、子供の​​またはtransform: noneを使用して、それを上書きすることはできません。です。それに対抗する1つの方法は、子に逆変換を適用することです。ここでは、scaleは子に影響を与えてはならないので、親のスケールの逆数をそれに適用する必要があります。

親のscaleXは0.972であるため、子のscaleXは1.028である1/0.972（逆数）である必要があります。同様に、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>