transform + transition 导致内容跳跃或模糊 CSS

Question

让我们从 fiddle 开始：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 和 font-smoothing 来解决模糊内容，但到目前为止没有成功。

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

Answer 1

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

我将让文本位于 transform 的元素之外。

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

用sibling的方式完成

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

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

transform + transition 导致内容跳跃或模糊 CSS

transform + transition causes jump or blurry content CSS

css

transition

transform