Вращение ширины элемент 90 ° без потери прогресса прокрутки ⇐ Html

[Anonymous]

I would like to make a scrolling view to be able to rotate 90° and not lose scrolling progress, while filling its container widthways in both rotations.
Requirements:

[*]The visible center of the non-rotated version should be the same as the center of the rotated version (clamped to the edges of the container; neither view should add padding Чтобы или перекрывать края контейнера, чтобы удовлетворить это, просто отображайте от края вместо этого, если это то, что это близко к/пост-ротация)
[*] Предварительная резация между контейнером-шириной: соотношение контент-ширины
​​ . Ориентация с широкой новой высокой (не связанная с моей демонстрацией) также должна быть полностью подходит в высокой ориентации.document.addEventListener('click', () => {
document.querySelector('#rotator').classList.toggle('rotated');
});< /code>
#container {
display: flex;
justify-content: center;
align-items: center;
counter-reset: figure;
border: 1px solid black;
--container-width: 500px;
--container-height: 200px;
width: var(--container-width);
height: var(--container-height);
}

#rotator {
width: var(--container-width);
height: var(--container-height);
margin: 0;
padding: 0;
overflow: scroll;
}

#rotator.rotated {
width: var(--container-height);
height: var(--container-width);
transform-origin: center;
transform: rotate(90deg);
}

figure {
border: 1px solid green;
position: relative;
width: calc(100% - 2px);
aspect-ratio: 100 / 70;
margin: 0;
}

figure::before {
counter-increment: figure;
content: counter(figure);
position: absolute;
left: 50%;
color: black;
}< /code>














< /code>
< /div>
< /div>
< /p>
Проблема состоит в том, что это не удовлетворяет второму требованию; Центр вращающегося обзора не соответствует центру не приоткрытного вида. Как я могу это исправить?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... l-progress