Question

让我们从小提琴开始：http://jsfiddle.net/r1kw37g5/

.grid-item .diamond .inner-diamond{
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 394px;
  height: 394px;
  position: relative;
  top: -23%;
  left: -23%;
}

情况是我创造了一个菱形网格。该网格中的元素旋转-45度，内部的容器旋转45度，使内容再次平直。（内容显示在悬停中）

在该容器内部是一个带有简单动画的按钮，这是问题开始的地方。当您将鼠标悬停在按钮上时，其他内容会变得模糊一段时间，直到动画结束并向右跳跃1px。

我试过：在容器上放一个translateZ（0）来阻止它跳转。这有效，但内容模糊不清。我试图通过缩放和缩放组合保存三维和字体平滑来对抗模糊内容，但到目前为止还没有运气。

问题是，是否有人知道如何在没有跳跃的情况下为按钮设置动画，而其他内容不会变得模糊？

Answer 1

似乎动画中存在一些问题（CSS transition effect makes image blurry / moves image 1px, in Chrome?）

我会将文字放在transform元素之外。

将.button放入.diamond
移动.inner-diamond成为.diamond的兄弟，给它一个opacity: 0（删除.diamond-content的{{1}}）
将opacity:0设置为pointer-events:none

使用兄弟方法来实现它

.inner-diamond

快速演示（布局不漂亮）： http://jsfiddle.net/r1kw37g5/6/

转换+转换导致跳转或模糊内容CSS

1 个答案: