CSS：变换原点

我对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

上时，它会稍微向上浮动，而我要做的是保持在一个位置，并且只在右侧和底部增长/重新缩放

---

我希望你们理解我想说的。

你们应该设置转换应该设置动画的属性，在你们的例子中，应该添加到

转换中的是
转换：1s ease in out，像这样的
转换：转换1s轻松输入输出


#测试{
高度：100px；
宽度：100px；
背景色：红色；
左边距：100px；
边缘顶部：100px；
}
#测试：悬停{
变换：尺度（2）；
转换：转换1s轻松输入输出；
变换原点：左上；
}

试验
div{
宽度：100px；高度：100px；
边框：1px纯红；
过渡性质：变换；
过渡时间：200ms；
过渡时间功能：轻松进入；
过渡延迟：50ms；
变换：缩放（0,0）；
变换原点：左中；
}
按钮：悬停+div{
变换：缩放（1，1）
}
你好
地位
变换原点属性补充了变换属性。它允许我们使用CSS告诉浏览器我们希望转换发生在什么坐标。以下是方法：

变换原点：[x][y]

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

我在这里写了一篇完整的文章：
通过示例
检查您需要哪个变换原点--问题是，当我擦除转换时没有问题..缓入缓出-指定一个开始和结束缓慢的转换效果--这就是您想要的吗--
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>