Question

我正在建立一个网站，遇到transform: scale的问题。我有一个按钮，当用户盘旋它时，会发生两件事：

背景“扫描”对角
按钮标签颜色更改
按钮略有增长

我有这个工作，它看起来非常好，但在实现了点 3 之后，当按钮增长时，我看到左侧有一个奇怪的间隙。

这是我的代码：click for demo

HTML

<a href="#" class="button">Hover</a>

CSS

body {
    text-align: center;
    padding-top: 10%;
}

.button {
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: 600;
    background: transparent;
    transition: all ease .25s;
    border: 3px solid green;
    color: green;
    position: relative;
    overflow: hidden;
    z-index: 2;
    font-family: sans-serif;
    padding: 20px 35px;
    text-decoration: none;
}

.button:before {
    content: ' ';
    transition: all ease-out .25s;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    z-index: -1;
    transform: skewX(-45deg) translateX(-100%);
    background: green;
}

.button:hover:before {
    transform: translateX(0);
}

.button:hover {
  color: white;
  transform: scale(1.1);
}

这是我看到的差距的截图。 Chrome和Safari中出现此问题（我没有测试过Firefox或IE，因为我无法在工作时下载它们。）

Screenshot of weird gap

Answer 1

它“仅”出现在Chrome中，但不出现在Firefox中（编辑：更糟糕的是Edge：首先它在左边然后在底部......）。不确定是否存在舍入错误或其他因素导致该差距，但我发现将border替换为box-shadow会改善渲染。
在转换结束时仍然可以看到间隙，但最终消失，所以我在:hover上添加了2个盒子阴影：新的盒子阴影插入并填补了“border / box-shadow之间的空白“和内容框更快。

Codepen：http://codepen.io/PhilippeVay/pen/oYjZzK?editors=0100

body {
    text-align: center;
    padding-top: 10%;
}

.button {
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: 600;
    background: transparent;
    transition: all ease .25s;
    box-shadow: 0 0 0 3px green; /* replaces border which caused a gap in Chr, not Fx */
    color: green;
    position: relative;
    overflow: hidden;
    z-index: 2;
    font-family: sans-serif;
    padding: 19px 34px;
    text-decoration: none;
}

.button:before {
    content: ' ';
    transition: transform ease-out .25s;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    z-index: -1;
    transform: skewX(-45deg) translateX(-100%);
    background: green;
}

.button:hover:before {
    transform: translateX(0);
}

.button:hover {
  color: white;
  box-shadow: 0 0 0 3px green, inset 0 0 0 1px green; /* improves end of transition in Chrome */
  transform: scale(1.1);
}

<a href="#" class="button">Hover</a>

编辑：玩过渡的大小：伪

.button:before {
  content: ' ';
  transition: all ease-out .25s;
  width: calc(200% + 6px);
  height: calc(100% + 6px);
  position: absolute;
  top: -3px;
  left: -3px;
  transform-origin: 0 3px;
  z-index: -1;
  transform: skewX(-45deg) translateX(-100%);
  background: green;
}

考虑到边框但由于overflow: hidden而没有改变任何内容。

所以这是我的第三次尝试：通过添加一个容器（或将A元素作为容器）并保持子元素的边框，它会使间隙消失（溢出在边界附近）。

Codepen：http://codepen.io/PhilippeVay/pen/ZBbKWd

body {
    text-align: center;
    padding-top: 10%;
}
a {
  display: inline-block;
  overflow: hidden;
    background: transparent;
    transition: all ease .25s;
    color: green;
    position: relative;
    z-index: 2;
    font-family: sans-serif;
    text-decoration: none;
}
a > span {
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: 600;
    border: 3px solid green;
    padding: 20px 35px;
}

a:before {
    content: ' ';
    transition: all ease-out .25s;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    z-index: -1;
    transform: skewX(-45deg) translateX(-100%);
    background: green;
}

a:hover:before {
    transform: translateX(0);
}

a:hover {
  color: white;
  transform: scale(1.1);
}

<a href="#" class="button"><span class="bd">Hover</span></a>

Fx过渡到完美无瑕......并通过在右侧添加2px来“校正”宽度。但是它已经在你的jsbin中可见，所以它是另一个故事（并且我猜的不那么烦人，因为用户将点击当时的imho）

变换规模导致差距/线

HTML

CSS

1 个答案: