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>

我可以在<div>标记内使用transform：scale（）吗？

1 个答案: