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上时，它会稍微向上浮动，我想做的是坚持一个地方，并且只在右侧和底部增长/重新缩放。

这是代码笔链接。

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

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

转换源属性是对转换属性的补充。它允许我们仅使用 CSS 准确地告诉浏览器我们希望转换发生的坐标。方法如下：

变换原点：[x][y]

将 x 和 y 替换为百分比值，例如 50% 表示中间位置，0% 表示开始位置，100% 表示结束位置。我做了一支笔，帮助你一劳永逸地理解这一点。

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