调整高度与宽度转换的起始点

在进行CSS动画或过渡时，有时需要精确控制元素的变化起点。例如，对于高度和宽度的过渡，可能希望从元素的某个特定位置开始，而不是默认的左上角。

具体来说，如果有一个矩形元素，并设置了如下的过渡效果：

transition: width 2s, height 2s, transform 2s;

当前情况下，矩形会从左上角开始扩大。但如果您希望它从顶部中心开始扩大，可以通过调整CSS属性来实现这一目标。

一个常见的方法是使用transform-origin属性来指定变换的中心点。例如，将变换的中心点设置为顶部中心，可以这样设置：

transform-origin: 50% 0;

这表示变换将围绕元素顶部的中心点进行。此外，为了确保元素在变化过程中保持居中对齐，还可以添加以下CSS规则：

margin: 0 auto;

通过这些设置，您可以实现矩形从顶部中心开始扩大的效果。请参考以下示例：JSFIDDLE DEMO。