CSS转换原点中心赢得'；t按预期均匀扩展宽度或高度

我试图了解如何使用“变换原点”创建宽度或高度均匀的“生长”。为什么从我指定的变换原点的中心展开不起作用

<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
    transition: height 2s;

   -webkit-transform-origin: center center;
           transform-origin: center center;
}

div:hover {
    height: 300px;
}
</style>

div{
宽度：100px；
高度：100px；
背景：红色；
-webkit过渡：高度2s；/*适用于Safari 3.1到6.0*/
过渡：高度2s；
-webkit变换原点：中心；
变换原点：中心；
}
div:悬停{
高度：300px；
}

变换原点仅适用于变换的对象，而不适用于高度或其他对象

“变换原点”属性与CSS一起使用 变换，使您可以更改变换的原点

如果要执行此操作，可以与

页边距顶部

一起使用，以获得所需的结果：

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */
    transition: all 2s;
}

div:hover {
    height: 300px;
    margin-top: -100px; // (300px - 100px) / 2
}

---

-webkit transform origin仅适用于transform属性，而不适用于高度

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */
    transition: all 2s;
}

div:hover {
    height: 300px;
    margin-top: -100px; // (300px - 100px) / 2
}