CSS样式问题：关于transform:scaleY()与height直接写大后的区别

仿照teacher的写法实现了将li向下拉伸的效果，效果和代码如以上所示，但是我产生了一个问题，我之前用transform:scaleY()做是由图片中心点上下同时拉伸，于是我设置了transform-origin:center top; 结果图片向下拉伸的同时，内部圆也被拉大了，内部圆是由定位做的，具体代码如下：

用scaleY会放大圆，但是为什么直接写大height，li就会向下延伸而不是像scale一样由中心点延伸呢？同时为什么圆没有被放大？

height是改变容器高度。
transform: scale()是一种形变，就像你拿一个放大镜看东西，整体都变化了。

ps：transform改变的元素不会脱离文档流，不会改变自身实际的大小和位置，例如下面图片，使用transform放大了两倍，但自身实际大小没有改变，没有把旁边元素挤开

在CSS中，transform: scaleY()和直接设置height都可以用于修改元素的垂直方向的大小。然而，它们的实现方式和效果是不同的。

1.使用transform: scaleY()：这个属性使用一个比例值来缩放元素的高度，而不会改变元素的布局流。它将沿着垂直方向对元素进行缩放，而不会改变元素的宽度。这意味着元素的其他部分（例如内部内容）保持不变，只有高度会按比例缩放。这对于一些动画效果或需要在不改变布局的情况下控制元素高度的情况非常有用。

示例：

.scale-element {
  transform: scaleY(1.5);
}

上述示例将元素的高度增加到原始高度的1.5倍，而不会影响宽度。

2.直接设置height：当你直接设置元素的height属性时，你会直接改变元素的高度，并且可能会影响到元素周围的布局。这意味着元素的其他部分（例如内部内容）也会相应地被拉伸或压缩，以适应新的高度。这在需要精确控制元素高度的情况下是有用的。

示例：

.height-element {
  height: 200px;
}

上述示例将元素的高度设置为固定的200像素，可能会导致元素的宽度和其他布局属性发生变化。
所以，transform: scaleY()适用于只改变元素高度而不影响布局的情况，而直接设置height则更适合需要精确控制元素高度并且布局会相应改变的情况。