Позиционирование повернутого элемента CSS?

Question

[Владимир Сергеевич]

Всем Мир!
Такой вопрос... Начал делать сайт и что-то блоки которые вы увидите мне показались какими-то дедовскими и сильно замылиными на Google Chrome. Решил попробовать новый вариант и тревуется вертикально разместить текст в блоке, картинкой как-то не хочу.

Возможно ли отпозиционировать элемент повернутый через Transform.
Написал сумбурно и непонятно. но зайдите сюда и сразу поймете проблему...
Огромное спасибо!

Answer 1

[Александр Степанов]

Попробуйте поиграть со свойством transform-origin и допишите свойство transform, например так:

.front .front_label h1 {
    font-size: 15px;
    transform: rotate(-90deg) translate(-100%, 0);
    display: inline-block;
    width: 154px;
    transform-origin: 0 0;
}

Comments

[Владимир Сергеевич]

Огромное спасибо! А то с Transform как-то еще не доводилось работать.

[Александр Степанов]

VladimirZhid: Не за что, успехов в освоении css3 :)

Answer 2

[Хатам Союнов]

Для себя сделал такое универсальное решение FlexBox с JS.

PUG

h1.title
	span Отзывы

SASS

.title
		display: flex
		align-items: center
		justify-content: center
		text-align: center
		width: 0
		margin-right: 155px
		border: 1px solid red // рамка родителя для наглядности
		span
			font-size: 150px
			line-height: 150px
			font-weight: 600
			color: #eaeeef
			transform: rotate(-90deg)
			border: 1px solid blue // рамка самого текста для наглядности

JS

function verticalTitle(selector) {
	var titleWidth = $(selector).find('span').width();
	var titleHeight = $(selector).find('span').height();

	$(selector).css({'width':titleHeight+'px', 'height':titleWidth+'px'});
}

verticalTitle('.title');

Скрипт получает ширину и высоту текста и задает для родителя как ширина=высота, высота=ширина. Эту функцию можно запускать при resize и будет адаптивным.
Результат