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
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>
