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

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() 吗？

Can I use transform:scale() inside a <div> tag?

html

css

css-transforms