为什么可以使用公式1/a undo transform：scale（）？
我正在尝试编写一些JavaScript代码，该代码使用Transform：scale（）css属性缩放DIV元素，然后将其取消标准，以便该元素返回其原始大小。我认为，如果我通过应用变换来扩展元素：比例（a），我可以通过应用转换：比例（1 / a）来取消尺度，因为（元素xa）x（1 / a）=元素。但是，这似乎不起作用。为什么不呢？
function scale_up() {
document.getElementById("div").style.transform = "scale(3)";
}
function scale_down() {
document.getElementById("div").style.transform = "scale(0.33)";
}
setTimeout(scale_up, 3000)
setTimeout(scale_down, 6000) /* this should return the div to its original size, but it doesn't */#div {
height: 30px;
width: 30px;
border-style: solid;
}<body>
<div id="div"></div>
</body>I am trying to write some JavaScript code that scales a div element using the transform:scale() CSS property, and then un-scales it so that the element returns to its original size. I thought that if I scale the element by applying transform:scale(a), I could un-scale it by applying transform:scale(1/a), since (element x a) x (1 / a) = element. However, that does not seem to work. Why not?
function scale_up() {
document.getElementById("div").style.transform = "scale(3)";
}
function scale_down() {
document.getElementById("div").style.transform = "scale(0.33)";
}
setTimeout(scale_up, 3000)
setTimeout(scale_down, 6000) /* this should return the div to its original size, but it doesn't */#div {
height: 30px;
width: 30px;
border-style: solid;
}<body>
<div id="div"></div>
</body>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
CSS是一种声明性语言，因此在给定元素上应用新属性或选择器以相同的属性名称替代了现有的属性；再次设置属性时，不会添加或乘以属性。
CSS变换，以此为基础，以相同的方式工作：将转换设置为
scale（3），然后将其设置为scale（0.33）与仅设置的效果相同它到比例尺（0.33）：后者变换取代了前者。应用此原理，为了撤消转换，您可以简单地删除将其应用于您的元素的CSS属性；您可以通过简单地将属性设置为空字符串来做到这一点，根据此stackoverflow答案。另外，在这种情况下，您可以简单地设置1：
CSS is a declarative language, and thus applying new properties on a given element or selector replaces existing ones with the same property name; properties are not added or multiplied when you set them again.
CSS transforms, building upon this, work the same way: setting the transform to
scale(3)and then setting it toscale(0.33)has the same effect as just setting it toscale(0.33): the latter transform replaces the former.Applying this principle, to undo the transform you can simply remove the CSS property that applies it to your element; you can do this by simply setting the property to an empty string, as per this StackOverflow answer. Alternatively, in this case, you can simply set a scale of 1:
应用CSS规则不会加起来，它会相互替代。
因此，首先，您的scale_up应用转换：比例（3），您的元素与他的原始大小缩放x3 。
然后，您的scale_down应用转换：比例尺（0.33），您的元素从他的原始大小< /strong>缩放 /3 。
要将其设置为正常，请应用一个转换：比例（1）;
Applying a css rule doesn't add up, it replace each other.
So first, your scale_up apply a transform: scale(3), your element is scaled x3 from his original size.
Then your scale_down apply a transform: scale(0.33), your element is scaled /3 from his original size.
To set it back as normal, apply a transform: scale(1);
比例不应用任何永久效果，您只需要还原为默认量表（100％）：scaledoesn't apply any permanent effects, you only need to revert to the default scale (100%):