相关疑难解决方法(0)

我不确定这是否可行,但我认为使用CSS变换来创建一个效果,其中div从其中心扩展到预定的高度和宽度,而不是仅从左上角开始.

例如,如果我有(演示)

<div id="square"></div>

和(供应商前缀为了简洁而遗漏)

#square {
    width: 10px;
    height: 10px;
    background: blue;
    transition: width 1s, height 1s;
}
#square:hover {
    width: 100px;
    height: 100px;
}

在悬停时,这会将方块向右扩展到100px.我想从中间扩展它.

我知道我可能会使用transform: scale(x)(演示),但这并没有真正为我提供一个非常"像素完美"的布局(因为它是基于百分比的),它也不会影响周围的布局(使其他文档流中的元素调整为其大小调整).这基本上是我想要做的,除非文档流相应地受到影响.

有没有人知道没有javascript的方法吗？