Как добиться поворота объекта строго относительно его центра при абсолютном позиционировании?

Question

[Влад]

Как добиться поворота объекта с абсолютным позиционированием строго относительно его центра при том, что этот объект имеет бОльшие размеры нежели его обёртка со свойствами position: relative; и overflow: hidden; ?
Вот набросал примерчик ЗДЕСЬ.
Для наглядности нагенирил разные значения свойства background у блоков portfolio__book.
Заментите overflow: hidden;. Почему блок .portfolio__inner не центруется при том, что в нём прописано transform-origin: center center;?

Comments

[Александр Талалаев]

Немного не ясно что вы хотите добиться. Можно хотя бы схематический рисунок.
А так, может быть у вас в portfolio__inner лишний модификатор в свойстве transform - translate(-50%, -50%), если его убрать поворот относительно центра.

[Влад]

Александр Талалаев, мысленно в центре объекта portfolio__inner обозначьте центр, вращайте объект типа как колесо – центр всегда на месте. Я обозначил центр с помощью transform-origin: center center, однако в данном случае это не работает.

[Ankhena]

top:  50%;
left:  50%;

а не с минусом.
Вам ведь нужно сначала спозиционироваться в центр, а не черти куда.

[Влад]

Ankhena, это вы, видимо, зашли, когда я там пытался что-то подмутить. Всё больше ничего не трогаю там.
Всё, больше не трогаю там ничего.
Для наглядности я закомментилoverflow: hidden;.
Вы так же можете убрать вращение rotate(-45deg) и увидите, что объект на оси Y находится в нулевой точке. WTF?

[Ankhena]

Влад, для прояснения происходящего вы можете сделать две вещи: задать для portfolio__inner либо overflow: hidden либо что-то вроде border: 10px solid violet;

[Влад]

Ankhena, я так и делаю. Мне кажется, что дело в том, что portfolio__inner имеет свойстваdisplay: flex;, flex-direction: row; и flex-wrap: wrap;. Т.о. у этого объекта высота является динамической величиной, отсюда и трансформация его по высоте проблематична. Так?

[Ankhena]

Влад, дело в том, что у вас фикс высота. И центр блока находится там где нужно. Но контент выпал и вам кажется, что всё не там, где нужно.

[Влад]

Ankhena, А, точно. Дурья моя голова. Всё так просто )