rotateY() 文本是 blurry/pixelated
rotateY() text is blurry/pixelated
我旋转了一个带有文本的元素并对其进行了透视 3d 处理。文字真的是低保真度。有什么办法可以改善吗?
非常简单的示例代码:
<h1 style = "transform: perspective(150px) rotateY(-45deg);width:150px;">
This is text
</h1>
这看起来更好:
<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>
我认为您需要父容器以获得正确的视角。
-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>
旋转文本时,标准变换原点为中心。
这意味着文本的右侧部分离观众越来越近,因此被放大了。
通过一些实验,您可以获得类似的效果,将变换原点设置为右侧 - 这样所有文本都远离 - 然后增加字体大小。
也就是说,正确的字母将以更大的字体呈现,而不是放大,从而导致字体不那么模糊,但大小相同
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>
我旋转了一个带有文本的元素并对其进行了透视 3d 处理。文字真的是低保真度。有什么办法可以改善吗?
非常简单的示例代码:
<h1 style = "transform: perspective(150px) rotateY(-45deg);width:150px;">
This is text
</h1>
这看起来更好:
<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>
我认为您需要父容器以获得正确的视角。
-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>
旋转文本时,标准变换原点为中心。
这意味着文本的右侧部分离观众越来越近,因此被放大了。
通过一些实验,您可以获得类似的效果,将变换原点设置为右侧 - 这样所有文本都远离 - 然后增加字体大小。
也就是说,正确的字母将以更大的字体呈现,而不是放大,从而导致字体不那么模糊,但大小相同
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>