分类导航

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – 3D变换后文字模糊，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有一个div,我用X轴旋转了. div包含在应用旋转时变得模糊的文本.有没有什么办法让文字在这个轴上旋转很清晰？我试过translate3d和translateZ“黑客”,但没有成功.

.tilt {
    margin: 0 auto;
    width: 300px;
    height: 400px;
    border: 1px solid #222;

    -webkit-transform: perspective(500pX) rotateX(35deg);
       -moz-transform: perspective(500pX) rotateX(35deg);
            transform: perspective(500pX) rotateX(35deg);
}

<div class="tilt">    Lorem ipsum dolor sit amet,consectetur adipisicing elit. Asperiores deleniti expedita nostrum ipsam culpa rem earum recusandae saepe nulla repudiandae molestiae natus consectetur neque quasi quos laudantium doloribus iusto minima!
Lorem ipsum dolor sit amet,consectetur adipisicing elit. Expedita id magnam labore doloribus velit quidem exercitationem aspernatur nobis dolore omnis deserunt culpa quibusdam nemo adipisci possimus nesciunt debitis minus ullam!
Lorem ipsum dolor sit amet,consectetur adipisicing elit. Debitis commodi assumenda sed natus eligendi! Temporibus nobis molestiae aperiam ut repudiandae doloribus eveniet quod illo. Natus reiciendis eum ab itaque enim!
Lorem ipsum dolor sit amet,consectetur adipisicing elit. Eveniet fuga recusandae quisquam voluptatibus qui ipsa pariatur dolor libero cumque quod iste error porro laborum. Non quam quidem tempora corporis veniam!</div>

解决方法

这是一个解决方法,使文本不那么模糊.它不会使像素完美,但它更好.测试在chrome 38 FF 32和IE 11窗口7.

关键是用font-size缩放文本(x2)(在示例中,小提琴我也缩放了容器的宽度/高度),并使用transform：scale(0.5)缩小它.文本以比1：1默认缩放比例更少的模糊呈现.

这是一个屏幕截图(chrome 38)的两个fiddles：

和一个DEMO

CSS：

.tilt {
    margin: -200px auto 0;
    width: 600px;
    height:800px;
    font-size:2em;
    border: 2px solid #222;


    -webkit-transform: perspective(500pX) rotateX(35deg) scale(0.5);
       -moz-transform: perspective(500pX) rotateX(35deg) scale(0.5);
            transform: perspective(500pX) rotateX(35deg) scale(0.5);
}

比例优化：

当文本具有默认比例比时,会在原始OP fiddle中看到它的效果.当您以0.1比例缩放文本时,文本会以像素渲染错误为单位：

DEMO

关键是找到别名和虚拟文本之间的最佳折中.对于OP示例,0.5给出了一个很好的结果,但我确信可以优化.

根据John Grivas的建议,您还可以添加一个1px的文本阴影,这样可以使中间和上一行渲染更好：