18

我正在使用 css3 缩放转换来缩放包含其他 div 的 div。

我遇到的问题是，我需要保持一些内部 div 保持原样，基本上就好像它们没有缩放一样，它们的大小不应该改变，但是我确实需要用里面的其他东西来缩放父 div。

你怎么能在某些 div 中反转缩放？
我正在尝试应用反向缩放。
如果整个 div 应用了 1.5 的值，我正在尝试找到我现在应该缩放其他 div 的值，以在视觉上将它们恢复到以前的样子。

4

4 回答 4

32

如果父 div 已缩放 1 倍1.5，那么您需要将子 div 缩放 1 倍1/1.5 = 0.(6)以保持其大小不变。

例子

通常，为了取消子元素已应用在父元素上且比例因子为 的a比例变换，您需要在子元素本身上应用因子的另一个比例变换1/a。

您要么需要：

  • 在你做任何其他事情之前手动计算比例因子，然后在你的代码中使用它（上面链接的示例）
  • 使用预处理器为您处理此问题（SASS 示例）
  • 使用 JavaScript 计算孩子所需的比例因子并设置孩子的transform比例
于 2013-03-21T11:11:51.560 回答
4

您可以使用 CSS 变量来存储比例因子，然后用于calc()计算具有特定类的子元素的逆比例：

.wrapper {
  transform: scale(var(--scale));
  background: #ddd;
}

.wrapper > * {
  text-align: center;
}

.wrapper > .revertscale {
  transform: scale(calc(1/var(--scale)));
}
<div class="wrapper" style="--scale: 0.8">
  <h2>scaled title</h2>
  <p>scaled description</p>
</div>

<div class="wrapper" style="--scale: 0.8">
  <h2 class="revertscale">not scaled title</h2>
  <p class="revertscale">not scaled description</p>
</div>

⋅ ⋅ ⋅</p>

如果您不希望任何子元素缩放，另一种方法是将包装器设置为伪元素：

.wrapper {
  position: relative;
}

.wrapper > * {
  text-align: center;
}

.wrapper::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scale(var(--scale));
  background: #ddd;
}
<div class="wrapper" style="--scale: 1">
  <h2>title</h2>
  <p>description</p>
</div>

<div class="wrapper" style="--scale: 1.2">
  <h2>title</h2>
  <p>description</p>
</div>

<div class="wrapper" style="--scale: 0.8">
  <h2>title</h2>
  <p>description</p>
</div>

于 2018-12-17T09:47:23.283 回答
1

任何缩放操作的逆操作是1 / <scale>通过缩放容器，1.5您需要通过1 / 1.5 = 0.6

不幸的是，根据规范，您不能只使用 CSS，例如：

transform: scale(1/1.5);

因为规模被定义为scale(<number>[, <number>])

<number>在哪里

一个或零个或多个小数位，后跟一个点 (.)，后跟一个或多个小数位

因此，您必须自己进行计算，或者可以使用支持此类操作的动态样式表语言（如LESS ） 。

演示（仅限 webkit）

于 2013-03-21T11:12:49.393 回答
0

如果您按照建议使用倒置的比例因子，请注意孩子在比例变换期间不一定保持其原始大小- 这当然只有当您让比例变换具有持续时间时才重要（例如通过使用transition: transform;） .

于 2017-06-01T00:21:03.700 回答