Размытый текст при использовании css перехода и поворота

Это артефакт от движков текстового рендеринга в браузере. Текст не кэшируется, а отображается для каждого изменения, в результате чего каждая отдельная точка преобразуется (поворачивается). Ошибки и ошибки округления приводят к несколько несогласованному рендерингу.

Чтобы избежать этой проблемы, вы можете сначала перенести текст в изображение и использовать его. Вы можете сделать это двумя способами:

• Предварительная подготовка в автономном режиме и использование этого
• Отобразить текст в реальном времени с помощью элемента холста

это имеет дополнительное преимущество для повышения производительности.

Модифицированная скрипка здесь

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

canvas.width = 90;
canvas.height = 90;

ctx.fillStyle = '#613a1c';
ctx.font = '16px serif';
ctx.textBaseline = 'top';
ctx.fillText('Hello', 20, 20);
ctx.fillText('I am the', 20, 38);
ctx.fillText('text', 20, 56);

document.getElementById('info_txt').appendChild(canvas);