变换 + 过渡导致内容跳跃或模糊 CSS

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) 来阻止它跳转。这可行，但会使内容不断模糊。我尝试使用缩放和缩放组合 preserve3d 和字体平滑来对抗模糊的内容，但到目前为止还没有运气。

问题是，有没有人知道一种方法可以让按钮在不跳转且其他内容不模糊的情况下为按钮设置动画？

Answer 1

动画好像有问题(CSS transition effect makes image blurry / moves image 1px, in Chrome?)

我会让文本在transform的元素之外。

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

使用兄弟方法来实现它

.diamond:hover + .inner-diamond {
  opacity: 1
}

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