Повернуть текст в JS -генерированном <li>

Question

Я работаю над небольшим скриптом, который будет генерировать произвольное количество фрагментов для круга. Я рисую элементы круга следующим образом: сгенерированный круг . Со следующим кодом Javascript:

for () {
        menu.styleSheet += `li:nth-child(${i + 1}) {\n` +
                                `\ttransform: rotate(${currentDegrees}deg) skewY(${degreeOffset - 90}deg);\n` +
                             `}\n\n`;

        menu.styleSheet += `li:nth-child(${i + 1}) .text {\n` +
                               `\ttransform: skewY(${90 - degreeOffset}deg) rotate(${degreeOffset / 2}deg);\n` +
                           `}\n\n`;

        currentDegrees += degreeOffset;
    }

Прямо сейчас я пытаюсь преобразовать числа (см. Рисунок выше), чтобы они всегда смотрели вверх, но в настоящее время я застрял. Как лучше всего преобразовать поворот текста без преобразования li или изменения положения текста? Я хочу, чтобы числа оставались на том же месте, что и сейчас, просто лицевой стороной вверх, не нарушая сгенерированный стиль.

Answer 1

Решением было добавить p внутри li , и я смог повернуть текст, не испортив дизайн.