rotateY()文本模糊/像素化

时间:2015-04-14 18:01:32

标签: html css css3 css-animations perspective

我已经旋转并透视3d带有文字的元素。文字真的很低保真。有没有办法改善它?

非常简单的示例代码:

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

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

3 个答案:

答案 0 :(得分:2)

我认为你需要父容器才能正确看待。

-webkit-perspective: 900px;

将文本悬停在可视化

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>

或者看一下这个例子

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

答案 1 :(得分:0)

这看起来更好:

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

或者这个:

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

答案 2 :(得分:0)

旋转文本时,标准变换原点为中心。

这意味着文本的右侧部分越来越接近观众,因此放大了。

通过一些实验,您可以获得类似的效果,将变换原点设置为右侧 - 这样所有文本都会远离 - 然后增加字体大小。

也就是说,右边的字母会以更大的字体呈现,而不会放大,导致字体模糊不清,但尺寸相同

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>