CSS缩放一个div但希望HTML保持正常比例

Question

我有以下的HTML和CSS：

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

当外部盒子通过动画进行缩放时，我该如何保持文本不缩放？

- cdub

---

@RoryMcCrossan 或者转换文本元素本身！ - roberrrt-s

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>

所以这个想法是：

1. 你有一个容器元素
2. 你有两个内部持有块
3. 你动画一个看起来像盒子的并缩放它。
4. 文本 div 永远不会被动画触及，因为它在一个单独的元素中。

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

- PetarS

---

理论上，你可以。通过反转子元素的缩放0.5来实现。 - Roko C. Buljan

可能是我表达有误。问题在于 - 这不是按照那个人要求的最佳方式进行操作。这将使用过多的绘图来反转内部子元素的缩放比例，并且看起来模糊。如果只是用于按钮，可能在悬停时就不需要这么做了。 - PetarS

Answer 2

你需要将内部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>

- Pete

---

我正在使用jQuery动画来缩放，这样做可以实现动画效果吗？ - cdub

不太确定，这取决于动画正在做什么。 - Pete

Answer 3

我不确定这是否是您想要的，但是...

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

将子元素缩小。对于缩放比例x，您需要对所有子元素使用比例1/x。

- The Witness

---

使用jQuery的动画效果将其缩放为2倍，然后再缩小为0.5倍，这样文本会变得有些模糊。 - cdub

我不知道jQuery在缩放时使用了什么，可能是transform，但这个属性的问题是它可能看起来不太好看。即使在<canvas>上使用简单的transform: translate()也会使图像模糊，因此我预计它可能会影响文本本身。当然，这取决于浏览器和其他因素（显卡？）。 - The Witness

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>

- Roberto Lonardi

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

- roberrrt-s