变换模糊文本：在Chrome中旋转

Question

我有一个列表六边形在我的网页中像这样

我必须使用transform：rotate来在其中包含正确的文本，但在Chrome文本中是模糊的，在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解决了这个问题：

Fill

我只是遇到了一个类似问题的项目，该项目有一个偏斜转换并在处理该错误时发现了该错误，尽管在我的项目中它是由不必要的rotateZ（0）转换引起的。