Html 背面可见性使子元素中的文本模糊

我正在尝试为我的布局制作可堆叠的六边形，使用css3出色的转换功能制作！唯一的问题是，当I和a：悬停效果在其上更改不透明度时，在过渡期间，它会更改反别名属性，平滑所有线条，并使文本模糊。它也会暂时改变它周围的一切，尽管它会在一秒钟左右的时间里重新稳定下来。虽然这不一定与网站的功能冲突，但它看起来相当马虎

我试图通过将代码更改为以下内容来解决此问题：

虽然这修复了所有的缺陷，但现在我的文本在转换和其他过程中变得模糊。我尝试添加-webkit backspace可见性：无；到.HexDesc，因为它是文本的直接容器

.HexIn2 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-backface-visibility:hidden;

-webkit-background-size: 125%;
-moz-background-size: 125%;
background-size: 125%;
visibility: visible;

-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
transition: all 0.5s ease;
}

    .HexDesc {
    padding: 3px; 0px 3px 0px;
    -webkit-backface-visibility:none !important;
    background: #ffffff;
    color:#000;
    margin-top:106px;
    height: 81px;
    font-family: 'PT Sans Narrow', sans-serif;
    line-height:85%;
    letter-spacing:1px;
    font-size: 13px;
    }

然而，这没有任何效果。我也试过在那个里扔“！important”，试着让它凌驾于那个div里的所有其他东西之上，然后又一次的废话！它就像HexDesc容器中的任何东西一样，因为背面可见性绝对没有影响！这是非常令人沮丧的：C我想知道是否有人知道为什么会发生这种情况，我有什么办法可以避免这种情况？

对于“中间”值来说，情况往往如此。对于旋转，您将仅在0、90、180、270、360处取消模糊。。。这是浏览器本身的一个bug。 您可能会注意到，这适用于css中的许多内容（例如，不透明度在不为1或0时通常具有滴流效果）

在您的情况下，在JSFIDLE中，如果将所有

120deg

替换为

180deg

，将所有

60deg

替换为

90deg

，它将非常有效。（意思是没有模糊，但你不再得到六边形）。对于三角形，我建议使用此border hack（）制作它们。你可以得到相同的结果

---

对于“暂时不对齐”，这也是Chrome（可能还有其他浏览器，我不知道）的一个已知错误。即使你去gmail或youtube，你仍然会看到这种情况发生

因此，如果不删除当前的十六进制代码，就无法解决此问题：布米耶。但是，这是一个新事物，不是吗。我应该期待像这样的错误^^；但这并不意味着我不会热切希望有更好的一天！我将切换到基于边框的六边形样式。谢谢Florian的支持，我很感激！是的，所有带前缀的（-webkit-，-moz-…）值仍然处于实验状态，所以你可以预期会出现问题。我不知道该怎么做。为了实验，我点击了绿色复选标记，希望就是这样？哈哈，如果我还需要做些什么来验证它，请告诉我。你确实是这样做的。谢谢：）同样的解决方案适用于translateX或TanslateY。谢谢谢拉夫。（例：我用translateX（-51%）代替translateX（-50%）。