CSS：transform-origin

Question

我在CSS中进行转换时遇到问题。

#test{
  height:100px;
  width: 100px;
  background-color: red;
  margin-left: 100px;
  margin-top: 100px;
}

#test:hover{
  transform : scale(2);
  transition:1s ease-in-out;
  transform-origin : left top;
}

问题是，当你将鼠标悬停在div上时，它会略微向上浮动，我想要做的就是坚持到一个地方，然后只在右侧和底部进行增长/重新缩放。

Here is codepen link。

我希望你们明白我想说的话。

Answer 1

你应该设置转换应该设置哪个属性，在你的情况下，应该添加到transform的transition: 1s ease-in-out;，就像这个transition: transform 1s ease-in-out;。

#test{
  height:100px;
  width: 100px;
  background-color: red;
  margin-left: 100px;
  margin-top: 100px;
}

#test:hover{
  transform : scale(2);
  transition: transform 1s ease-in-out;
  transform-origin : left top;
}

<div id="test">
  TEST
</div>

Answer 2

div{
    width:100px;height:100px;
    border:1px solid red; 



    transition-property: transform;
transition-duration: 200ms;
transition-timing-function: ease-in;
transition-delay: 50ms;
transform: scale(0, 0);
transform-origin: center left;


}
button:hover + div{
    transform: scale(1, 1)
}

<button>hello</button>

<div>status</div>

Answer 3

transform-origin属性补充了transform属性。它允许我们使用CSS，准确告诉浏览器我们希望转换发生的坐标。这是如何做：

变换原点：[X] [Y]

将x和y替换为百分比值，例如中间为50％，开始时为0％，结束位置为100％。我已经用笔帮助你一劳永逸地理解这一点。

我在这里写了一篇完整的文章：https://medium.com/@RajaRaghav/understanding-css-transform-origin-property-2ef5f8c50777和说明性的例子