Как убрать размытие при использование translateZ?

Question

[MarkITDes]

Использую translateZ для текста, но текст размывает. https://codepen.io/kirill778/pen/MWaeqaQ
Важно, чтобы при повороте, текст как-бы тоже был в 3d, а не на самой картинке(фоне). Может можно заменить translateZ или убрать размытие?

Comments

[MarkITDes]

Проект в codepen выполнен схематично. Но там видно что текст "Привет" размыт, даже по сравнению с обратной стороной "Пока" . Работает при наведение

[MarkITDes]

Что удивительно, на андроиде все отображается хорошо

[Роман Сарваров]

Никак. Особенность Chromium.
Можно попробовать увеличить размер шрифта, при этом убрав вообще transform.

https://codepen.io/roman-sarwarow/pen/pojbxqo

Но как я понял, это вам не подходит.

Answer 1

[MarkITDes]

Помогла вставка картинкой через png

Answer 2

[Арсений Матыцин]

Попробуй использовать SVG и его трансформации и, ВАЖНО, не используй текстовое начертание, вместо него пользуй path-ы.

Как? В граф редакторе набираешь текст, выбираешь шрифт, другие параметры → переводишь в кривые (разбираешь), экспортируешь.
Почему? Всегда есть шанс пролюбить шрифт.
Впрочем, можешь и попробовать ради динамического содержимого.

Comments

[MarkITDes]

Арсений, большое Вам спасибо. Ваше решение является не совсем правильным, но Вы натолкнули меня на мысль. Решением оказалось вставка текста в формате .png (думаю, на других форматах картинки тоже сработает). Пытался вставить в svg и через path-ы и через text начертание, всё равно размытие. Зашёл в photoshop > написал текст > экспортировал в .png и теперь без размытия.

[WapSter]

MarkITDes, видимо ты не понял. трансформации svg использовать, а не css

[MarkITDes]

WapSter, Может быть Вы и правы. Но пытался трансформации поместить в svg и ничего