从 div 中心的 CSS 过渡宽度和高度

Question

我有 位置元素：绝对； 我想在某些情况下过渡。但是，宽度和高度过渡的原点似乎取决于上/下左/右值。

有什么办法可以对此进行更多控制吗？

我特别希望从 div 的中心过渡。

有没有不依赖于转换顶部/底部左/右值的解决方案？

---

编辑：

我想保持宽度和高度的过渡。

感谢您的回答，但在这种情况下使用 Transform scale 不是解决方案。 Transform 属性 中的百分比指的是元素边框的大小，而不是容器的大小。参见例如 这个 JSFiddle ，将鼠标悬停在两个元素上的最终结果是如何不同的。

---

JSFiddle

 div, span {
  width:30%;
  height:30%;
  background:pink;
  transition:all 1s ease;
  position:absolute;
}
*:hover{
  width:10%;
  height:10%;
}
div{
  top:10%;
  left:10%;
}
span{
  bottom:10%;
  right:10%;
}

 <div></div>
<span></span>

原文由 Alvaro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好吧，你总是可以使用 transform - scale 来解决这个问题：

 div {
  background:pink;
  width:200px;
  height:200px;
  transition:all 1s ease;
}
div:hover{
        -webkit-transform: scale(0.1);
        -ms-transform: scale(0.1);
        transform: scale(0.1);
}

 <div></div>

原文由 Chen 发布，翻译遵循 CC BY-SA 3.0 许可协议