html - 我可以使用转换 :scale() inside a tag?

Question

我一直在尝试使用这个代码片段:

<div style="transform:scale(2,0)"><p>Hello World</p></div>

但是 div 并没有改变它的大小。难道我做错了什么？还是我不能在 div 中使用 transform:scale()。

Answer 1

您有 2 个问题。首先，您在第二个参数中使用了 0 值，这意味着您正在将元素缩放到 0 高度，因此它是不可见的。

如果我们更正此问题并使其成为 1，您需要考虑比例的原点，默认情况下它是元素的中心，因此缩放两次将使在屏幕左侧消失的文本。

添加一个动画，你会清楚地注意到这一点:

.change {
 animation:change 2s linear infinite alternate;
 border:1px solid;
 /*the center*/
 background:linear-gradient(red,red) center/10px 100% no-repeat;
}
@keyframes change{
  to{transform:scale(2,1);}
}

<div class="change"><p>Hello World</p></div>

你需要调整transform-origin 才能看到元素

<div style="transform:scale(2,1);transform-origin:left;"><p>Hello World</p></div>