Повёрнутый текст, влияющий на поток

Повёрнутый текст, влияющий на поток

За­да­ча: по­лу­чить по­вёр­ну­тый на 90 гра­ду­сов текст.
Про­бле­ма: При ис­поль­зо­ва­нии trans­form, блок ве­дёт себя ана­ло­гич­но сдви­гу че­рез po­si­tion:rel­a­tive — про­дол­жа­ет за­ни­мать ме­сто в по­то­ке по со­сто­я­нию до транс­фор­ма­ции, так что, из­ме­не­ние про­ис­хо­дит толь­ко визуальное.
Но нужно по­вер­нуть блок так, что­бы текст вли­ял и на по­ток вывода.
Также размер высоты текста, в исходном состоянии, нужно знать, а по ширине респонсив)
А вот магический код который помогает это сделать:

See the Pen text-transform table by (@AnnSerba) on CodePen.0

Также более реальный пример:

See the Pen text-transform table by (@AnnSerba) on CodePen.0

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *