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

[Anonymous]

Я хотел бы сделать вид прокрутки, чтобы иметь возможность вращать 90 ° и не терять прогресс прокрутки, заполняя ширину контейнера в обоих вращаниях. < /p>
Требования: < /p>

Содержание, видимое в неконтролируемой версии, все еще должно быть видно пост-строительством, как возможным, как возможным, как возможным, как возможным, как возможным, как возможным, как возможным, как возможным, как возможным, как возможным. /> Предварительная резация между контейнером: ширина контента: соотношение контент-ширины должно быть таким же, как и пост-ротация контент-ширины: < /li>
< /ol>
Два условия подразумевают, что все, что видно из содержимого в широкой ориентации с ноткой (не разрешается в моей демонтаре), также должно быть полностью в визе. /> Моя почти работающая демонстрация: < /p>

Код: Выделить всё

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: 200px;
--container-height: 100px;
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>
Проблема состоит в том, что это не удовлетворяет первое требование; Содержание, видимое в некалируемом представлении, не всегда все еще видно в повернутом представлении.  Как я могу это исправить? Спрыг, построенный, скрытый ">
document.addEventListener('click', () => {
document.querySelector('#rotator').classList.toggle('rotated');
});< /code>
#container {
counter-reset: figure;
border: 1px solid black;
--container-width: 200px;
--container-height: 120px;
width: var(--container-width);
height: var(--container-height);
overflow: hidden;
}

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

#rotator.rotated {
transform-origin: top right;
transform: rotate(90deg) scale(calc(var(--container-height) / var(--container-width))) translateX(100%);
}

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>

Я был бы еще больше заинтересован в другом решении, которое удовлетворяет оба требования с меньшим количеством CSS или меньше контейнеров HTML

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