Разворот текста по дум осям

Question

Учю css, нашла макет там текст интересно от зеркален. Хочу сделать зеркально, данный текст, в css, пыталась с помощью свойства transform: scale(-1, -1), но не получилось, порядок слов в html, должен остаться таким же.

    .en {
      position: relative;
      transform: rotate(-90deg);  
      color: #070707;
  
    }
    .table {
position: relative;
top:-10px;
      transform: rotate(-90deg);  
      color: #070707;

    }
  
    .ru {
      transform: rotate(-90deg);  
    }
  }

                <div class="language" id="language">
                    <div class="en">ENG</div>
                    <div class="table">| </div>
                    <div class="ru">RU</div>
                </div>

Answer 1

Чтобы сохранить порядок слов нужно вращать весь контейнер <div class="language" id="language">

Для позиционирования блока (чтобы он вращался вокруг левой верхней точки), необходимо написать для него правило CSS:

transform-origin:left top;
transform-box:fill-box;
 transform: rotate(90deg);

    .table {
position: relative;
top:-10px;
color: #070707;
    }
  
    .ru {
     color:#828282;
    }
    
    .language{
     margin:2em;
     font-weight:700;
     font-size:36px;
     font-family:sans-serif;
    transform-origin:left top;
    transform-box:fill-box;
    transform: rotate(90deg); 
    
  }

<div class="language" id="language">
     <span class="ru"> RU</span> | ENG
</div>

UPDATE

Вариант ENG | RU

.table {
position: relative;
top:-10px;
color: #070707;
    }
  
    .eng {
     color:#828282;
    }
    
    .language{
     margin:2em;
     font-weight:700;
     font-size:36px;
     font-family:sans-serif;
    transform-origin:left top;
    transform-box:fill-box;
    transform: rotate(90deg); 
    
  }

<div class="language" id="language">
                    <span class="eng"> ENG</span> | RU
                </div>

Answer 2

Если я правильно понял ваш вопрос, то вот подходящее решение:

.language {
    display: flex;
    writing-mode: vertical-rl;
}

.en, .table, .ru {
    color: #070707;
}

Если вам принципиально, чтобы "ENG", "|", "RU" были блочными элементами, то нужно объявить родительский блок .language flex-контейнером с помощью свойства display: flex;

Свойство writing-mode: vertical-rl; задает направление текста сверху-вниз и справа-налево. Оно примечательно тем, что учитывает размеры элемента и так же меняет направление курсора при выделение текста, чего нельзя достичь при использовании transform

БЛОГ НА HUSL

Разворот текста по дум осям

Ответы (2 шт):

UPDATE