html - rotateY() text is blurry/pixelated -


i've rotated , perspective-3d element text. text low fidelity. there way improve it?

really simple example code:

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

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

i think need parent container right perspective.

-webkit-perspective: 900px; 

hover text visulization

div {    -webkit-perspective: 100px;    -webkit-transform-style: preserve-3d;  }    h1 {    display: inline-block;    transition: 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 text</h1>  <div>

or see 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 div text.</div>  </div>


Comments

Popular posts from this blog

Java 8 + Maven Javadoc plugin: Error fetching URL -

css - SVG using textPath a symbol not rendering in Firefox -

c - gcc compile error: unknown type name 'File' -