【问题标题】：How to remove such "blur" effect on css transition如何消除对 CSS 过渡的这种“模糊”效果
【发布时间】：2015-03-01 00:10:50
【问题描述】：

使用 css 转换时出现问题，请看这里：

http://jsfiddle.net/vwtqhbt2/

使用样式：

.hexagon-in2:hover .polygon{
    transform: rotate(30deg);
    bottom: 0px;
}
.hexagon-in2 .polygon{

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

在 FF 和 Chrome 上 - 悬停效果相同，我没有应用任何模糊效果，但在悬停时你可以看到它。有什么解决方法的建议吗？

【问题讨论】：

标签： css css-transitions

【解决方案1】：

编辑：找到更好（或更短？）的解决方案。

只需在您的

中删除 transform: rotate(30deg);

.hexagon-in2:hover .polygon{
    transform: rotate(30deg);
    bottom: 0px;
}

原来是这样的

.hexagon-in2:hover .polygon{
    bottom: 0px;
}

http://jsfiddle.net/vwtqhbt2/2/

旧解决方案

有一种方法可以消除过渡前后的差异效果。那就是使用translateZ(0)

喜欢

transform: rotate(-60deg) translateZ(0);
-webkit-backface-visibility: hidden; /* optional */

http://jsfiddle.net/vwtqhbt2/1/

但您的图像总是模糊不清。如果你不想那么模糊，我可以建议使用另一个 CSS 技巧来制作六边形。因为图像转换引起的模糊。它旋转了几次。

在这种情况下，尝试使用Triangle css trick，调整大小，然后在 4 个角上放置 4 个三角形（您需要正确的尺寸，否则它看起来不像六边形）。给他们高z-index 覆盖盒子的角落。然后在里面设置样式......瞧~~

4个红色三角形将在这些位置模拟六边形

【讨论】：

这是一个关于三角形的非常好的想法，将尝试