Адаптивный поворот текста

#html #css #вёрстка #адаптивная_верстка

Нужно сделать заголовок адаптивного блока с поворотом. Загвоздка в том, что блок
адаптивный, ширина меняется относительно экрана, и высота может быть сколь угодно разная,
в зависимости от внутреннего содержания. При повороте нужно учесть на какую ширину
и высоту сместится блок при повороте, а она получается разная. Текст съезжает, ведь
ширина становится высотой, а высота шириной. Помогите разобраться.

Как сохранить пропорции текста? Добавить еще одну обертку и повернуть в обратную
сторону? Возможно ли это только с помощью css?

Желаемый результат, заголовок(красным) должен быть расположен по центру, по вертикали
и по горизонтали:



Сейчас вот так:



Пример кода:



.block{
  position:relative;
  padding-left:5rem;
  margin:0 auto;
  width:50%;
}
.pin{
  position:absolute;
  display:block;
  top:0;
  left:0;
  bottom:0;
  width:3rem;
  height:100%;
  background:rgba(221, 221, 221, 0.5);
}
.pin span{
  position:absolute;
  display:inline-block;
  top:0;
  left:0;
  right:0;
  bottom:0;
  vertical-align:bottom;
  text-align:center;
  transform:rotate(-90deg);
  background:rgba(221, 221, 221, 0.5);
  color:red;
}

  
Заголовок
  
  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст
  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст
  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст




    

Ответы

Ответ 1

Используем предназначенный для этих целей writing-mode: vertical-lr + transform:
rotate(180deg). Центрировать надпись внутри будем при помощи флексбокса.



.block{
  position:relative;
  padding-left:5rem;
  margin:0 auto;
  width:50%;
}
.pin{
  position:absolute;
  display:block;
  top:0;
  left:0;
  bottom:0;
  width:3rem;
  height:100%;
  background:rgba(221, 221, 221, 0.5);
  writing-mode: vertical-lr;
  display: flex;
}
.pin span{
  margin: auto;
  transform: rotate(180deg);
}

  
Заголовок
  
  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст
  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст
  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст



Ответ 2

Вот так работает, но только если текст в одну строку, без переносов.



.block {
  margin: 0 auto;
  padding-left: 5rem;
  position: relative;
  width: 50%;
}

.pin {
  background: rgba(221, 221, 221, 0.5);
  bottom: 0;
  display: block;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 3rem;
}

.pin span {
  bottom: 50%;
  color: red;
  display: inline-block;
  left: -500px;
  position: absolute;
  right: -500px;
  text-align: center;
  transform-origin: center center 0;
  transform: rotate(-90deg);
  white-space:nowrap;
}

  
Заголовок

  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст
  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст
  
Текст
  
Текст Разный текст
  
Сколько угодно текста текст
  
Неизвестное количество текста текст
  
Сколько угодно текста текст





Или смотреть код на jsfiddle


Ответ 3

Так вроде ... без всяких трудностей



*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.r{
width:50px;
height:100%;
background:#ccc;
text-align:center;
line-height:50px;
-webkit-writing-mode: vertical-rl;
writing-mode:tb-rl;
 font: Consolas, Monaco, monospace;
}
.r span{
display:inline-block;
transform:rotate(-90deg);
font-size:30px;
height:4vh;
color:#fff;
}
@media screen and (max-height:520px){
.r span{
	display:inline-block;
	height:6vh;
}
}

	п
	р
	и
	м
	е
	р