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>
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
Post a Comment