Поведение переполнения после использования преобразования CSS3

Ответ 1

Вы используете transform, чтобы изменить визуальную модель форматирования элемента.

Из MDN:

Свойство преобразования CSS позволяет вам изменять координатное пространство Модель визуального форматирования CSS. Используя его, элементы могут быть переведены, поворачивается, масштабируется и перекосится в соответствии с установленными значениями.

Линия снова из MDN:

Изменяя координатное пространство, CSS-преобразования меняют положение и формы затронутого контента без нарушения нормальной поток документов. Это руководство содержит введение в использование трансформирует.

От W3C: 2 взаимодействия с модулем

Этот модуль определяет набор свойств CSS, которые влияют на визуальный рендеринг элементов, к которым применяются эти свойства; эти эффекты применяются после того, как элементы были отсортированы и расположены в соответствии с моделью визуального форматирования из [CSS21]. Некоторые значения этих свойств приводят к созданию содержащего блок и/или создание контекста стекирования.

Итак, у вас есть родительский элемент с размерами ниже.

width: 1096px; 
height: 434px;

Теперь вы преобразовываете этот элемент, используя

-webkit-transform: rotate(90deg);

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

Итак, хотя вы изменили свой элемент таким образом, но все же вертикальное пространство было занято из-за height вашего преобразованного элемента, который преобразовывался визуально, но не буквально...

Итак, теперь какое решение? Используйте position: absolute; для дочернего элемента, и в любом случае вы используете position: relative; для родителя.

Демо

#RotationDiv {
    -ms-transform-origin: 539px 539px;
    -webkit-transform-origin: 539px 539px;
    width: 434px;
    height: 1096px;
    position: absolute;
    overflow: visible;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    background-color:Red;
}

У меня есть тестовый пример, у меня есть стили, как показано ниже

.parent .transformed {
    height: 200px;
    width: 200px;
    background: #f00;
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
    -moz-transform-origin: 300px 300px;
    -webkit-transform-origin: 300px 300px;
    transform-origin: 300px 300px;
}

.parent .static {
    background: #00f;
    height: 200px;
    width: 200px;
}

Тест-код

Здесь я преобразую элемент, имеющий class of .transformed, поэтому, если вы видите, элемент делает transform и также меняет начало, но следующее поле не будет перемещаться вверх, так как преобразованный элемент возьмите буквальное пространство в потоке, он не выходит из потока, как position: absolute;, но хорошо, что отдельная концепция.

Итак, вам нужно использовать position: absolute; или ваш div будет по-прежнему занимать пространство по вертикали и, следовательно, вы увидите эту полосу прокрутки...

Poopy IE совместимое решение

Как вы прокомментировали, ну да, IE все равно покажет полосу прокрутки, поскольку элемент, который находится в позиции absolute, все еще существует в тех же измерениях, так что же здесь тренировка?

• Во-первых, вы преобразовываете элемент в родительский контейнер, также вам не нужен overflow, поэтому первый вопрос заключается в том, что вам не нужно overflow, чем использовать auto? Вы можете использовать hidden.

• Если не hidden для родителя, и вы надеетесь разместить некоторый контент под преобразованным элементом, чем лучше вы оберните преобразованный элемент внутри другого элемента теми же размерами, что и для overflow: hidden;, и сделайте убедитесь, что вы переместили свойство position: absolute; в этот блок. - Демо

• Если все еще не доволен? Тогда зачем transform весь элемент? transform только соответствующее изображение - Демо

Ответ 2

Это связано с тем, что он по-прежнему использует вертикальные свойства (так же, как hmore009 сказал в комментариях).

Если мы посмотрим здесь, вы увидите, что это значит, что вы знаете, что это правда.

Пример 1:

Таким образом, высота и ширина контейнера таковы:

width: 1096px;
height: 434px;

Теперь вы поступили правильно и замените их на преобразование #RotationDiv:

width: 434px;
height: 1096px;

Это отлично работает, если мы должны изменить контейнер на overflow: hidden;, это означает, что мы не видим дополнительной высоты.

ДЕМО ЗДЕСЬ

Пример 2:

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

Если мы удалим высоту из #RotationDiv, переполнение больше не существует. Это немного связано с проводами? Ну нет, высота была использована как для преобразования, так и для вертикальной высоты.

ДЕМО ЗДЕСЬ

Итак, как мы можем знать, что это была высота, вызывающая это?

Теперь, если мы дадим #RotationDiv ту же высоту, что и контейнер, мы видим, что переполнение не происходит.

ДЕМО ЗДЕСЬ

Теперь, если мы добавим 1px на эту высоту, мы получим переполнение. Hmm, поэтому высота должна быть причиной этого. Даже если мы преобразуем высоту, по-прежнему используется для вертикальной высоты в контейнере.

ДЕМО ЗДЕСЬ

Как мы можем это исправить?

Ну, мы уже видели один вариант, дадим контейнер overflow: hidden; или просто удалим его полностью. Это остановит прокрутку в контейнере.

ДЕМО ЗДЕСЬ

Или вы можете просто получить редактор изображений (есть некоторые бесплатные онлайн-версии) и перевернуть изображение таким образом. Сэкономит много неприятностей, делая это таким образом.

Другое, чтобы вы могли перевернуть изображение, удалите только #RotationDiv и дайте контейнер background: red;

ДЕМО ЗДЕСЬ

Как бы я это сделал, используя transform:

Я бы снял overflow: auto;, удалил ненужный div и установил преобразование на img.

Это вам, как вы хотите это сделать, есть много способов. Лучше всего я бы сказал, что он не использует преобразование и просто переворачивает изображение с помощью редактора изображений (например, Photoshop).

ДЕМО ЗДЕСЬ

Ответ 3

я тоже испытывал проблемы с переполнением

моя проблема заключалась в том, что горизонтальное масштабирование делало горизонтальное переполнение, поэтому я только что изменил горизонтальное масштабирование до вертикального масштабирования и решил проблему (или обошел проблему tbh)

Мое понимание этой ошибки заключается в том, что, поскольку она не имеет общего решения, просто обходите ее.