rotateY() text is blurry/pixelated

Question

I've rotated and perspective-3d an element with text. The text is really low fidelity. Is there any way to improve it?

Really simple example code:

<h1 style = "transform: perspective(150px) rotateY(-45deg);width:150px;">
    This is text
</h1>

http://codepen.io/anon/pen/dPxWQa?editors=100

Answer 1

I think you need parent container for right perspective.

-webkit-perspective: 900px;

Hover the text for visulization

div {
  -webkit-perspective: 100px;
  -webkit-transform-style: preserve-3d;
}

h1 {
  display: inline-block;
  transition: all 1s ease;
  border:1px solid #ccc;
  cursor:pointer;
}

h1:hover {
  display: inline-block;
  -webkit-transform-origin: 60% 40%;
  -webkit-transform: rotateY(-10deg);
}

<div>
  <h1>This is text</h1>
<div>

Or see this example

.container {
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 200px;
}
.child {
  font-size: 2.4em;
  margin: 100px;
  width: 250px;
  height: 50px;
  -webkit-transform: rotateY(-30deg);
}

<div class="container">
  <div class="child">This a div text.</div>
</div>