CSS 转换：缩放未对齐重叠的 div

Question

我创建了一个 CSS 丝带，另一个 CSS 丝带直接在第一个丝带后面作为阴影。

我正在尝试将这两者结合起来。

我用 div 包裹了丝带，并在 parent div 上应用了 transform: scale。它们没有像预期的那样增大或收缩色带，而是变得错位了。

应用 scale 时色带不对齐的原因是什么，如何解决？

.container {
  align-items: center;
  display: flex;
  justify-content: center;
}
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.bookmark-container {
  transform: scale(0.8);
}
.bookmark,
.bookmark-shadow {
  border: 0.7em solid;
  border-bottom-color: transparent;
  box-shadow: 0 -1em;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  height: 0;
  text-align: center;
  vertical-align: middle;
  width: 0;
}
.bookmark {
  color: #337ab7;
  position: relative;
  z-index: 10;
}
.bookmark-shadow {
  border: 0.75em solid;
  border-bottom-color: transparent;
  color: rgba(64, 64, 64, 0.5);
  margin-left: -0.05em;
  position: absolute;
  top: 0.9em;
  z-index: 5;
}

<div class="container fixed-header" style="background: #fefefe; height: 50px;">
  <div style="padding: 20px;">Unscaled: </div>
  <div>
    <div class="bookmark"></div>
    <div class="bookmark-shadow"></div>
  </div>
  <div style="padding: 20px;">Scaled to 80%: </div>
  <div class="bookmark-container">
    <div class="bookmark"></div>
    <div class="bookmark-shadow"></div>
  </div>
</div>

Answer 1

Children

更改元素的大小而不是 parent。这会给出更准确的结果。

.container {
  align-items: center;
  display: flex;
  justify-content: center;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.bookmark-container div {
  transform: scale(0.8);
}

.bookmark,
.bookmark-shadow {
  border: 0.7em solid;
  border-bottom-color: transparent;
  box-shadow: 0 -1em;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  height: 0;
  text-align: center;
  vertical-align: middle;
  width: 0;
}

.bookmark {
  color: #337ab7;
  position: relative;
  z-index: 10;
}

.bookmark-shadow {
  border: 0.75em solid;
  border-bottom-color: transparent;
  color: rgba(64, 64, 64, 0.5);
  margin-left: -0.05em;
  position: absolute;
  top: 0.9em;
  z-index: 5;
}

<div class="container fixed-header" style="background: #fefefe; height: 50px;">
  <div style="padding: 20px;">Unscaled: </div>
  <div>
    <div class="bookmark"></div>
    <div class="bookmark-shadow"></div>
  </div>
  <div style="padding: 20px;">Scaled to 80%: </div>
  <div class="bookmark-container">
    <div class="bookmark"></div>
    <div class="bookmark-shadow"></div>
  </div>
</div>

事实上，这里的元素并没有连接到End-to-End。出于这个原因，可以在数学上计算出 ".7em" 值和 ".75em" 值作为 ".05em"。但是当尺寸标注进入工作时，浏览器将四舍五入一些值。所以"Scale 100%"、"scale 80%"中的0.05em不是用0.05 * 80/100的公式计算出来的。当然，两个单独元素的增长或收缩率并不完全吻合。

不幸的是，浏览器有这样的能力。因为在 SVG 格式中也可以看到相同的内容。如果 point 没有相互连接，则两个 "different" 尺度给出不同的结果。

另一个：限制为parent

为了获得准确的结果，使用嵌套的元素会更有意义。 ::before ::after 这个returns你作为一个元素换一个"bookmark".

.container {
  align-items: center;
  display: flex;
  justify-content: center;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.bookmark-container {
  transform: scale(0.8);
}

.bookmark {
  box-sizing: border-box;
  color: #337ab7;
  cursor: pointer;
  display: inline-block;
  height: 0;
  box-shadow: 0 -1em;
  text-align: center;
  vertical-align: middle;
  width: 0;
  position: relative;
}

.bookmark::before {
  content: "";
  color: #337ab7;
  box-shadow: 0 -1em;
  border: 0.7em solid;
  border-bottom-color: transparent;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 10;
}

.bookmark::after {
  content: "";
  color: rgba(64, 64, 64, 0.5);
  border: 0.75em solid;
  box-shadow: 0 -1em;
  border-bottom-color: transparent;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 5;
}

<div class="container fixed-header" style="background: #fefefe; height: 50px;">
  <div style="padding: 20px;">Unscaled: </div>
  <div>
    <div class="bookmark"></div>
  </div>
  <div style="padding: 20px;">Scaled to 80%: </div>
  <div class="bookmark-container">
    <div class="bookmark"></div>
  </div>
</div>

正如我上面所说，好像有两个重叠的影子。但这只与浏览器有关。如果靠得太近，实际上看起来会更平滑。

CSS 转换：缩放未对齐重叠的 div

CSS Transform: Scale misaligns overlapping divs

html

css

shadow

css-transforms

Children

另一个：限制为parent