CSS: 变换原点

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 上时它会稍微向上浮动，我想做的是坚持一个地方，grow/rescale 只在右侧和底部。

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 属性补充转换属性。它允许我们仅使用 CSS 就可以准确地告诉浏览器我们希望在什么坐标处发生转换。方法如下：

变换原点：[x][y]

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

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

CSS: 变换原点

CSS: transform-origin

css

scale

css-transitions

css-transforms