CSS上的模糊文本在chrome中旋转了元素

Question

我使用CSS创建了一个六边形，六边形有一个翻转状态，里面有文字，在Chrome中总是显得模糊，但在IE11，IE Edge和FF中看起来很好。

由于六边形是由CSS制作的，我无法移除元素上的旋转，所以我需要另一种方法来修复模糊的文本？

我在这里有一个例子，我也尝试使用以下CSS属性，但它们似乎都没有阻止文本模糊：

https://jsfiddle.net/zg0eprmu/8/

-webkit-filter: blur;
-webkit-font-smoothing: antialiased;
will-change: transform;
-webkit-perspective: 1000px;
backface-visibility: hidden;
transform-origin(50% 51%);