我可以在标签中使用 transform：scale() <div> 吗？

Question

我一直在尝试使用以下代码片段：

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

但是div不会改变其大小。我做错什么了吗？或者是因为我不能在div中使用transform:scale()。

Answer 1

您有两个问题。首先，在第二个参数中使用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>