Проблемы с выравниванием текста в HTML при преобразованиях

Question

Я пытаюсь отобразить строку преобразованного текста в html/css, однако у меня были некоторые проблемы. Когда я масштабирую направление Y, общее выравнивание элементов смещается, как на этом рисунке.

Попытка просто повернуть L на 180 градусов приводит к той же ошибке. Как сохранить вертикальное выравнивание по оси Y для текста? Допустим, я также делаю это с маленькими заглавными буквами, какие-нибудь изменения для вашего решения?

Что здесь не так?

<style type="text/css" media="screen">
    #reflect{
     display: flex;
     flex-basis: auto;
    }
    #reflectl {
     /*transform: scaleX(-1) !important;*/
     transform: scale3d(-1,-1, 1);  !important;
    }
    #reflecte {
       transform: scaleX(-1) !important;
    }
    #reflectc {
       transform: scaleX(-1) !important;
    }
</style>

<text id=reflect>
  <text id="reflectref">REF</text>
  <text id="reflectl">L</text>
  <text id="reflecte">E</text>
  <text id="reflectc">C</text>
  <text id="reflectt" >T</text>
</text>

Answer 1

Кажется, проблема в том, что элемент выше, чем текст, который в нем содержится, поэтому при повороте центр вращения находится не совсем посередине, поэтому, когда это будет сделано, текст немного смещен. Простейшим решением было бы установить высоту элементов на ту высоту, которая им нужна.

<style type="text/css" media="screen">
    #reflect{
     display: flex;
     flex-basis: auto;
    }
    #reflect text {
        height: 17px;
    }
    #reflectl {
     /*transform: scaleX(-1) !important;*/
     transform: scale3d(-1,-1, 1);  !important;
    }
    #reflecte {
       transform: scaleX(-1) !important;
    }
    #reflectc {
       transform: scaleX(-1) !important;
    }
</style>

<text id=reflect>
  <text id="reflectref">REF</text>
  <text id="reflectl">L</text>
  <text id="reflecte">E</text>
  <text id="reflectc">C</text>
  <text id="reflectt" >T</text>
</text>

<style type="text/css" media="screen">
    #reflect{
     display: flex;
     flex-basis: auto;
    }
    #reflect text {
        height: 17px;
    }
    #reflectl {
     /*transform: scaleX(-1) !important;*/
     transform: scale3d(-1,-1, 1);  !important;
    }
    #reflecte {
       transform: scaleX(-1) !important;
    }
    #reflectc {
       transform: scaleX(-1) !important;
    }
</style>

<text id=reflect>
  <text id="reflectref">ref</text>
  <text id="reflectl">l</text>
  <text id="reflecte">e</text>
  <text id="reflectc">c</text>
  <text id="reflectt" >t</text>
</text>