Question

我试图了解如何使用transform-origin来创造一个平衡的“增长”。宽度或高度。为什么要从我指定转换起源的中心扩展它是否有效？

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

Answer 1

transform-origin仅适用于已转换的内容，而不适用于height或其他内容。

transform-origin属性与CSS结合使用变换，让你改变变换的原点。

.box {
  transform: rotate(360deg);
  transform-origin: top left;
}

Source

如果您想这样做，可以与margin-top一起使用，以获得您想要的结果：

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
}

<强> jsfiddle Demo

CSS变换原点中心不会按预期均匀地扩展宽度或高度

1 个答案: