我有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的标签。
所以可以做一些不影响子元素的事情吗?
我试图从player_controls 中删除转换
#mydiv .player_controls{transform:''}
子元素总是会受到父元素转换的影响。这不是子级继承的东西,因此不能通过在子级上使用transform: ' '
或transform: none
来覆盖它。对抗它的一种方法是对子对象应用反向变换。这里,由于scale
不应该影响子级,因此应该对其应用父级规模的倒数
父对象的scaleX为0.972,因此子对象的scale X应为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>