html格子像素画,html – rotateY()文本模糊/像素化

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

非常简单的示例代码：

This is text

最佳答案 我认为你需要父容器才能正确看待.

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

}

This is text

或者看这个例子

.container {

-webkit-transform-style: preserve-3d;

-webkit-perspective: 200px;

}

.child {

font-size: 2.4em;

margin: 100px;

width: 250px;

height: 50px;

-webkit-transform: rotateY(-30deg);

}

This a div text.