CODEWITHSUNDEEP
htmlcsscss-animationsperspective
Quasipickle
Quasipickle

Reputation: 4498

rotateY() text is blurry/pixelated

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

Upvotes: 4

Views: 815

Answers (3)

vals
vals

Reputation: 64244

When you rotate the text, the standard transform origin is center.

That mean that the right part of the text is getting nearer to the viewer, and so is zoomed in.

With a little bit of experimentation, you can get a similar effect setting the transform origin to the right - so that all text is going far away - and then increasing the font size.

That is, the right letter would be rendered in a bigger font, and not zoomed in, resulting in a less blurred font, but of the same size

h1 {
  transform: perspective(150px) rotateY(-45deg);width:150px;
  background: yellow;
}


#test {
  transform: perspective(150px) rotateY(-30deg);
  transform-origin: right center;
  font-size: 4em;
  width:325px;
  margin: 0px;
}
<h1>This is text</h1>
<h1 id="test">This is text</h1>

Upvotes: 0

Suresh Karia
Suresh Karia

Reputation: 18238

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>

Upvotes: 2

odedta
odedta

Reputation: 2478

This looks better:

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

Or this:

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

Upvotes: 1

Related Questions