Question

我有一个HTML和CSS如下：

<div class="box" style="transform: scale(2);">
    <div class="text">This is my text.</div>
</div>

当外框通过动画执行时，如何防止文本缩放？

Answer 1

理论上你不能。 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，因为它位于单独的元素中。

结构可以改进，希望能给你一个想法。干杯！

Answer 2

你需要将内部div除以1除以原始比例（在你的情况下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>

Answer 3

我不确定这是不是你想要的......

.parent {
    transform: scale(2);
}
.child {
    transform: scale(0.5);
}

将儿童缩小。对于比例x，您必须为所有孩子使用比例1/x。

Answer 4

转换后的元素的所有内容都使用它进行转换，就像使用不透明度时一样，您需要在缩放容器外部设置文本，并在它们上使用一些定位来使叠加层相互叠加：

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

Answer 5

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

CSS缩放div但希望html保持正常规模

5 个答案: