Blurryt文本的转换:在Chrome中旋转

Question

我的网页上有这样的六边形列表

​

​

我不得不使用transform:旋转以在其中包含一个正确的文本，但是在铬文本中是模糊的，在Mozilla中它显示的是正确的。

我找了很多次，但没有确切的方法。

我用这篇文章制作了这些六边形http://www.queness.com/resources/html/css3-hexagon/index.html

这是我的html

 <div class="hex hex-3">
            <div class="inner">
                <h4>Energy</h4>
                <hr />
                <p>

                </p>
            </div>
            <a href="#"></a>
            <div class="corner-1"></div>
            <div class="corner-2"></div>
        </div>

以及我使用的css的某些部分:在其中旋转

 .hex {
transform: rotate(30deg);
-webkit-transform:rotate(30deg);
}

.inner {
transform: rotate(-30deg);
-webkit-transform:rotate(-30deg);
 }

 .hex .corner-1 {
    z-index: -1;
    transform: rotate(60deg);
}

.hex .corner-2 {
    transform: rotate(-60deg);
}
 .hex .corner-1:before {
    transform: rotate(-60deg) translate(-87px, 0px);
    transform-origin: 0 0;
}

.hex .corner-2:before {
    transform: rotate(60deg) translate(-48px, -11px);
    bottom: 0;
}

知道怎么修吗？

Answer 1

一直很忙，我花了一段时间才发现，但是下面的css解决了这个问题：

.hex .corner-1,
.hex .corner-2,
.hex .corner-1:before,
.hex .corner-2:before {
    backface-visibility: inherit !important;
}

我只是在处理一个具有skewY转换的项目时遇到了类似的问题，但是在我的项目中，它是由一个不必要的rotateZ(0)转换引起的。