Question

我正在使用css transform: scale来动画输入模态。问题是文本比例包含<div>。

我该如何避免？

我想使用scale，因为这是获得更流畅动画的suggested方式。

Answer 1

没有您的代码，很难给您一个有效的答案。

基本上，您不能从缩放的父元素中排除子元素。你可以通过分离两个元素来完成你想要的东西。

有更多信息here。

Answer 2

您可以做的是转换两者容器和文本。

容器按比例放大，而文本按比例缩小 - 所以看起来保持不变。

这是一个非常基本的例子：

＆＃13;

button:focus + div {
  transform: scale(2);
}

button:focus + div p {
  transform: scale(.5);
}

div {
  width: 200px;
  margin: 0 auto;
  text-align: center;
  background: black;
  color: white;
}

＆＃13;

<button>Click to scale box</button>

<div>
  <p>Do not scale this text</p>
</div>

＆＃13;

Answer 3

@MalloreeEady回答，我刚刚从帖子中增加了答案。与父容器相关的文本通常会受到任何转换的影响。为了避免这种情况，您可能需要在其中创建另一个标记或使用伪元素。

＆＃13;

h2 {
    color: #ffffff;
}
.box {
  position: relative;
  width: 50%;
  height: 50%;
  padding: 10px;
  text-align: center;
  margin: 50px auto;
}

.box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  display: block;
  background: #000;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.box:hover::before {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}

＆＃13;

<div class="box">
  <h2>TEST TEXT</h2>
</div>

＆＃13;

转换容器时避免字体大小缩放的最佳方法是什么？

3 个答案: