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

Question

我正在尝试为我的布局制作可堆叠的六边形，这是使用 css3 出色的转换功能制作的!唯一的问题是，当我和一个 :hover 效果来改变它的不透明度时，在过渡期间它会改变抗锯齿属性，平滑所有线条，并使文本模糊。它还会暂时使周围的一切失去对齐，尽管它会在一秒钟左右后恢复原状。虽然这不一定与网站的功能冲突，但它看起来相当草率。

我尝试通过将代码更改为以下内容来解决问题:

http://jsfiddle.net/QPbJL/

虽然这解决了所有问题，但现在我的文本在过渡期间和其他情况下变得模糊。我试过添加 -webkit-backspace-visibility: none;到 .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;
    }

但是，这没有效果。我也试过把“!重要的”扔在那里，试图让它覆盖那个div中的所有其他东西，然后再次zilch!就像 HexDesc 容器中的任何东西一样，就背面可见性而言，效果绝对为零!这非常令人沮丧:C 我想知道是否有人知道为什么会发生这种情况，我有什么办法可以解决这个问题？

Answer 1

“中间”值通常是这种情况。对于旋转，您只会在 0、90、180、270、360 度处模糊...这是浏览器本身的错误。您可能会注意到这适用于 css 中的许多事情(例如，不透明度在不为 1 或 0 时通常会产生涓滴效应)。

在您的情况下，在您的 jsfiddle 中，如果您将所有 120deg 替换为 180deg 并将所有 60deg 替换为 90deg >，它会完美地工作。 (意思是没有模糊，但你再也看不到六边形了)。对于三 Angular 形，我建议使用这个边框 hack ( http://apps.eky.hk/css-triangle-generator/ ) 制作它们。您可以获得相同的结果。

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