从中心展开绝对定位的圆

Question

我有绝对定位的 div，它代表一个圆形通过更圆的边框。当 div 发生悬停事件时，我需要扩展这个圆圈，问题是圆圈向右/下方向扩展，我需要它从中心扩展。这是因为 top/left 参数具有固定值而发生的，我设法使用负的 top/left margin 克服了这个问题。最后一个问题是我想添加从正常状态到扩展状态的平滑过渡，这会产生不好的结果。 HTML 代码：

<div class="circle"></div>

CSS 代码：

.circle {

  position: absolute;
  left: 150px;
  top: 150px;
  border: 5px solid #000;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  -webkit-transition: width 0.5s, height 0.5s;
  -moz-transition: width 0.5s, height 0.5s;
  -o-transition: width 0.5s, height 0.5s;
  transition: width 0.5s, height 0.5s;
}
.circle:hover
{
  width: 60px;
  height: 60px;
   margin-left: -30px;
  margin-top: -30px;
}

工作示例：https://jsfiddle.net/ArturoO/4qLr0tc2/5/

如果您删除过渡规则，那么它会起作用，但我需要动画发生。有什么想法吗？

Answer 1

使用平移变换而不是边距

.circle {
  position: absolute;
  left: 150px;
  top: 150px;
  border: 5px solid #000;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}
.circle:hover {
  width: 60px;
  height: 60px;
}

<div class="circle"></div>