我有以下的HTML和CSS:
<div class="box" style="transform: scale(2);">
<div class="text">This is my text.</div>
</div>
当外部盒子通过动画进行缩放时,我该如何保持文本不缩放?
理论上你不能。 scale
会作用于整个元素和其内部子树。但是你可以让它看起来像是在缩放。类似这样(这种方法对 GPU 和浏览器绘制更轻量级):
<div class="box" style="position: relative">
<div class="box-block" style="position: absolute; transform: scale(2);"></div>
<div class="text">This is my text.</div>
</div>
div
永远不会被动画触及,因为它在一个单独的元素中。0.5
来实现。 - Roko C. Buljan你需要将内部div按照原始比例的倒数进行缩放(在你的情况下,1除以2等于0.5):
<div class="box" style="transform: scale(2);">
<div class="text" style="transform: scale(0.5);">This is my text.</div>
</div>
我不确定这是否是您想要的,但是...
.parent {
transform: scale(2);
}
.child {
transform: scale(0.5);
}
将子元素缩小。对于缩放比例x
,您需要对所有子元素使用比例1/x
。
transform
,但这个属性的问题是它可能看起来不太好看。即使在<canvas>
上使用简单的transform: translate()
也会使图像模糊,因此我预计它可能会影响文本本身。当然,这取决于浏览器和其他因素(显卡?)。 - The Witness被转换元素的所有内容都会随之转换,就像使用不透明度一样,您需要将文本设置在缩放容器外,并对它们使用一些定位来使它们重叠在一起:
<div class="text">This is my text.</div>
<div class="box" style="transform: scale(2);"></div>
另一种方法是通过为包含元素设置相反的样式来避免转换:
<div class="box" style="transform: scale(2);">
<div class="text" style="transform: scale(0.5);">This is my text.</div>
</div>
transform: scale(x)
会缩放整个元素及其所有子元素。我无法查看您的CSS,但您应该实施硬编码解决方案,以确保您的所有文本都不被缩放。在这种情况下,您可以使用以下代码:
.box:hover {
transform: scale(2);
}
.box:hover > .text {
transform: scale(0.5); // change it back to half of the intended size by the .box;
}