title: Blurry text on CSS rotated element in chrome
body: <p>I have created a hexagon using CSS, the hexagon has a rollover state, with text in it, which always appears blurry in chrome, but looks fine in IE11, IE Edge and FF.</p>
  
  <p>Due to the hexagon being made from CSS, I can't remove the rotation on the elements, so I need another way to fix the text being blurry?</p>
  
  <p>I have an example here, I've also tried using the following CSS attributes but none of them seem to stop the text being fuzzy: </p>
  
  <p><a href="https://jsfiddle.net/zg0eprmu/8/" rel="nofollow">https://jsfiddle.net/zg0eprmu/8/</a></p>
  
  <pre><code>-webkit-filter: blur;
  -webkit-font-smoothing: antialiased;
  will-change: transform;
  -webkit-perspective: 1000px;
  backface-visibility: hidden;
  transform-origin(50% 51%);
  </code></pre>