转换比例尺导致间隙/线 [英] Transform Scale Causing Gaps/Lines

查看：37
本文介绍了转换比例尺导致间隙/线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我当前正在建立一个网站，并且遇到 transform:scale 的问题.我有一个按钮，当用户将鼠标悬停在按钮上时，会发生两件事:

  1. 对角线背景扫描"
  2. 按钮标签的颜色改变
  3. 按钮略微增长

我已经完成了这项工作，而且看起来确实不错，但是在实现了 3 点之后，当按钮增大时，我发现左侧出现了一个怪异的间隙.

这是我的代码:点击演示

HTML 

 < a href =#" class ="button">悬停</a>

CSS 

  body {文本对齐:居中；顶部填充:10％；}.按钮 {显示:inline-block;文本转换:大写；字体大小:1.1em；字体粗细:600；背景:透明；过渡:所有缓解0.25秒；边框:3px纯绿色；颜色:绿色；职位:相对溢出:隐藏；z索引:2；字体家族:sans-serif;内边距:20px 35px;文字修饰:无；}.button:在{之前内容: ' ';过渡:所有缓解0.25秒；宽度:200％;高度:100％;位置:绝对；最高:0;左:0；transform-origin:0 0;z索引:-1；转换:skewX(-45deg)translateX(-100％);背景:绿色；}.button:hover:before {转换:translateX(0);}.button:hover {白颜色;转换:scale(1.1);}

这是我看到的差距的屏幕截图.此问题在Chrome和Safari中发生(由于我无法在工作中下载它们，因此我尚未测试Firefox或IE).

怪异的屏幕截图

解决方案

它仅"出现在Chrome中，而不出现在Firefox中(在Edge中更糟:首先在左侧，然后在底部...).不知道是否舍入错误或其他原因是造成这种差距的原因，但是我发现用 box-shadow 替换 border 可以改善渲染效果.
过渡结束时仍然可以看到一个缝隙，但最终消失了，所以我在:hover 上添加了2个框阴影:新的缝隙已插入并填补了"border之间的缝隙/box-shadow" 和内容框更快.

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

  body {文本对齐:居中；顶部填充:10％；}.按钮 {显示:inline-block;文本转换:大写；字体大小:1.1em；字体粗细:600；背景:透明；过渡:所有缓解0.25秒；box-shadow:0 0 0 3px绿色；/*替换导致Chr而不是Fx出现间隙的border */颜色:绿色；职位:相对溢出:隐藏；z索引:2；字体家族:sans-serif;填充:19px 34px;文字修饰:无；}.button:在{之前内容: ' ';过渡:转换缓动0.25秒；宽度:200％;高度:100％;位置:绝对；最高:0;左:0；transform-origin:0 0;z索引:-1；转换:skewX(-45deg)translateX(-100％);背景:绿色；}.button:hover:before {转换:translateX(0);}.button:hover {白颜色;box-shadow:0 0 0 3px绿色，插图0 0 0 1px绿色；/*改善了Chrome浏览器的转换结束*/转换:scale(1.1);}  

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

以转换后的:pseudo的大小播放

  .button:{之前内容: ' ';过渡:所有缓解0.25秒；宽度:calc(200％+ 6px);高度:calc(100％+ 6px);位置:绝对；顶部:-3px；左:-3px;transform-origin:0 3px;z索引:-1；转换:skewX(-45deg)translateX(-100％);背景:绿色；}

要考虑边框，但是由于溢出:隐藏而不会改变任何内容.

这是我的第三次尝试:通过添加一个容器(或将A元素作为容器)并在子元素上保留边框，它使该间隙消失(溢出在边框周围).

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

  body {文本对齐:居中；顶部填充:10％；}一种 {显示:inline-block;溢出:隐藏；背景:透明；过渡:所有缓解0.25秒；颜色:绿色；职位:相对z索引:2；字体家族:sans-serif;文字修饰:无；}>跨度 {显示:inline-block;文本转换:大写；字体大小:1.1em；字体粗细:600；边框:3px纯绿色；内边距:20px 35px;}a:{之前内容: ' ';过渡:所有缓解0.25秒；宽度:200％;高度:100％;位置:绝对；最高:0;左:0；transform-origin:0 0;z索引:-1；转换:skewX(-45deg)translateX(-100％);背景:绿色；}a:hover:before {转换:translateX(0);}a:悬停{白颜色;转换:scale(1.1);}  

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

Fx完美过渡到末尾……并通过在右边添加2px来校正"宽度.但这已经在您的jsbin中可见了，所以这是另一回事了(我想这不那么令人讨厌，因为用户会被当时的恕我直言点击)

I'm building a website currently and am experiencing issues with transform: scale. I've got a button, and when a user hovers over it, two things happen:

  1. A background "sweeps" in diagonally
  2. The button label colour changes
  3. The button grows slightly

I have got this working, and it looks really nice, but after implementing point 3, I'm seeing a weird gap to the left hand side when the button grows.

Here is my code: 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);
}

And here's a screenshot of the gap I'm seeing. This issue occurs in Chrome and Safari (I haven't tested Firefox or IE as I can't download them at work).

Screenshot of weird gap

解决方案

It "only" appears in Chrome but not Firefox (edit: worse in Edge: first it's on the left then on bottom...). Not sure if a rounding error or something else is the cause of that gap, but I find that replacing border by a box-shadow improves the rendering.
There's still a gap that can be seen near the end of the transition but finally disappears so I added 2 box-shadows on :hover: the new one is inset and fills the gap between "border/box-shadow" and content box faster.

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>

EDIT: playing with the size of the transitioned :pseudo

.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;
}

to take into account the border but that doesn't change anything because of overflow: hidden.

So here's my third try: by adding a container (or having the A element as a container) and keeping the border on the child element, it makes that gap disappear (overflow is around the border).

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 transitions till the end flawlessly... and "corrects" the width by adding 2px on the right. But it's already visible in your jsbin so it's another story (and less annoying I guess as user will have clicked by then imho)

这篇关于转换比例尺导致间隙/线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆