如何消除css过渡的这种“模糊”效应

Question

使用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上 - 对悬停的效果相同，我没有应用任何模糊效果，但在悬停时你可以看到它。有任何建议如何解决？

Answer 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/

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

在这种情况下，尝试使用Triangle css trick，然后调整大小，然后在4个角落放置4个三角形（你需要它的大小合适，否则它看起来不像六边形）。给它们高z-index以覆盖盒子的角落。然后里面的东西...... Voila ~~

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