对矩形进行平滑 CSS 变换缩放，保持均匀的边界

Question

我有一个绝对定位的 div，我想在悬停时缓慢增加尺寸（5s 过渡），成为相对定位的 div 的 "border"最重要的是：

<div class="rectangle">
    <div class="background"></div>
    <div class="content">blah</div>
</div>

样式（为了便于阅读删除了供应商前缀）：

.rectangle {
    position: relative;
}

.background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.content {
    height: 800px;
    width: 200px;
}

过渡整个 .background 大小会导致 动画断断续续 但边界均匀：

.rectangle:hover .background {
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    transition: 5s linear all;
}

过渡边框是 断断续续的动画，但（显然）是均匀的边框

.rectangle:hover .content {
    border: 20px solid red;
    transition: 5s linear all;
}

转换变换比例平滑，但会导致顶部和底部变大 "border"，因为它是一个矩形：

.rectangle:hover .background {
    transition: 5s transform;
    transform: scale(1.1);
}

有什么方法可以让变换比例保持均匀尺寸，或者有什么其他方法可以产生这种效果吗？

Answer 1

您可以尝试使用框阴影作为边框来实现平滑过渡。

.rectangle {
    position: relative;
    width: 300px;
    height: 300px;
    top: 100px;
    left: 30%;
}

.background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 0 0px #000;
  transition: 5s linear box-shadow;
}

.content {
    height: 300px;
    width: 200px;
}

.rectangle:hover .background::before {
    box-shadow: 0 0 0 20px #000;
    transition: 5s linear box-shadow;
}

<div class="rectangle">
    <div class="background"></div>
    <div class="content">blah</div>
</div>

对矩形进行平滑 CSS 变换缩放，保持均匀的边界

Smooth CSS Transform Scale on rectangle, keeping an even border

css

css-transitions

css-transforms