anti-aliasing in 2D and 3D transforms

dabblet.css

/* anti-aliasing in 2D and 3D transforms */
/* from KrofDrakula https://github.com/LeaVerou/prefixfree/issues/16 */
.wrapper {width: 264px;}
div > div, .box {
  width: 240px;
  height: 80px;
  margin: 24px;
  border: 5px solid #999;
  border-radius: 5px;
  padding: 3px;
  font-family: Georgia, serif;
 }
div > div {transition: transform .7s linear;}
.twod {transform: rotate(15deg);}
.threed {transform: rotate(15deg) rotateX(0deg);}
.nested {
  transform: -webkit-rotateX(0deg);
  background-color: hsl(0,90%,90%);
}
.threed-bg {
  background-color: #fff;
  transform: rotate(15deg) rotateX(0deg);
}
.wrapper:hover .twod {transform: rotate(0deg);}
.wrapper:hover .threed, .wrapper:hover .threed-bg {transform: 
rotate(0deg) rotateX(0deg);}
.wrapper:hover .threed2 {transform: 
rotate(0deg) translateZ(0deg);}

dabblet.html

<h1>anti-aliased text, <code>transform</code> &amp; -prefix-free</h1>
<div class="box">un-transformed box (default)</div>
<div class="wrapper">
<div class="twod">2D rotate some text to check anti-aliasing</div>
<div class="threed">2D rotate some text plus 3D <code>rotateX</code></div>
<div class="threed-bg">2D rotate some text plus 3D <code>rotateX</code> plus <code>background-color</code></div>
<div class="twod">2D rotate some text <span class="nested">with a nested <code>rotateX</code> span</span></div>
<div class="twod">2D rotate some text with an empty nested <code>rotateX</code> span tacked on the end, here → <span class="nested"></span></div>
</div>
<p>Text appears more anti-aliased in Chrome (and to a lesser degree Safari) with a 3D transformation applied.
To get around <a href="https://github.com/LeaVerou/prefixfree/issues/16">-prefix-free #16</a> you could wrap in a nested element. Also, it seems <code>-webkit-rotateX(0)</code> in an empty span infects the whole text block.</p>
<p>Note <a href="http://dropshado.ws/post/6142339613/resolving-anti-aliasing-on-webkit-hardware-accelerated">adding a <code>background-color</code> turns on sub-pixel anti-aliasing</a> for 3D transformed text (4th box)</p>

settings.json

{"view":"","prefixfree":"1","page":"html"}