Подтвердить что ты не робот

Текст размывается после 3D-преобразования

У меня есть div, который я повернул вокруг оси X с точки зрения. Div содержит текст, который становится размытым при применении вращения. Есть ли способ получить текст резким при вращении вокруг этой оси? Я пробовал translate3d и перевелZ "взломать", но безуспешно.

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

ОТВЕТЫ

Ответ 1

Ниже приведено обходное решение, чтобы сделать текст менее размытым. Это не делает пиксель идеальным, но это лучше. Протестировано на хроме 38 FF 32 и IE 11 windows 7.

Цель состоит в том, чтобы масштабировать текст вверх (x2) с помощью font-size (в примере скрипта я также масштабировал ширину/высоту контейнера) и масштабировал его обратно с помощью transform: scale(0.5);. Текст отображается с меньшим размытием, чем коэффициент масштабирования по умолчанию 1:1.

Вот скриншот (chrome 38) из двух скриптов:

Less blurry text with 3D transform

И 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, текст становится псевдоним с ошибками рендеринга пикселей:

Aliased text after 3d transform and a 0.1 scale ratio

DEMO

Дело в том, чтобы найти лучший компромисс между псевдонимом и текстом с размытым текстом. Для примера OP 0.5 дает хороший результат, но я уверен, что он может быть оптимизирован.

Как было предложено John Grivas, вы также можете добавить текстовую тень 1px, которая имеет тенденцию улучшать среднюю и верхнюю строки:

text-shadow: 0 0 1px #101010;

DEMO

Как прокомментировал Мэри Мелодия, некоторые шрифты выглядят лучше других, вы можете проверить это DEMO с самыми популярными шрифтами Google.