gpt4 book ai didi

html - rotateY() 文本模糊/像素化

转载 作者:搜寻专家 更新时间:2023-10-31 08:44:09 29 4
gpt4 key购买 nike

我旋转了一个带有文本的元素并对其进行了透视 3D 处理。文字真的是低保真度。有什么办法可以改善吗?

非常简单的示例代码:

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

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

最佳答案

我认为您需要父容器以获得正确的视角。

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

关于html - rotateY() 文本模糊/像素化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29634335/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com