Повернутые элементы в CSS, которые правильно влияют на высоту их родителя

предполагая, что вы хотите повернуть на 90 градусов, это возможно, даже для нетекстовых элементов, - но, как и многие интересные вещи в CSS, это требует немного лукавят. Мое решение также технически вызывает неопределенное поведение в соответствии со спецификацией CSS 2 - поэтому, хотя я протестировал и подтвердил, что он работает в Chrome, Firefox, Safari и Edge, я не могу обещать вам, что он не сломается в будущем выпуске браузера.

короткий ответ:

учитывая HTML, как это, где вы хотите повернуть .element-to-rotate...

<div id="container">
  <something class="element-to-rotate">bla bla bla</something>
</div>

... представьте два элементы обертки вокруг элемента, который вы хотите повернуть:

<div id="container">
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <something class="element-to-rotate">bla bla bla</something>
    </div>    
  </div>
</div>

... и затем используйте следующий CSS-код, чтобы повернуть против часовой стрелки (или см. комментарий transform для способа изменить его на вращение по часовой стрелке):

.rotation-wrapper-outer {
  display: table;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}
.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;

  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

Stack snippet demo

p {
  /* Tweak the visuals of the paragraphs for easier visualiation: */
  background: pink;
  margin: 1px 0;
  border: 1px solid black;
}
.rotation-wrapper-outer {
  display: table;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}
.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;

  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

<div id="container">
  <p>Some text</p>
  <p>More text</p>
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <p class="element-to-rotate">Some rotated text</p>
    </div>    
  </div>
  <p>Even more text</p>
  <img src="https://i.stack.imgur.com/ih8Fj.png">
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <img class="element-to-rotate" src="https://i.stack.imgur.com/ih8Fj.png">
    </div>
  </div>
  <img src="https://i.stack.imgur.com/ih8Fj.png">
</div>

как это работает?

путаница перед лицом заклинаний, которые я использовал выше, разумно; там много происходит, и общая стратегия не проста и требует некоторого знания CSS trivia, чтобы понять. Давайте пройдем через это шаг за шагом.

суть проблемы, с которой мы сталкиваемся, заключается в том, что преобразования применяются к элементу с использованием его transform свойство CSS все происходит после того, как макет состоялся. Другими словами, используя transform на элемент не влияет на размер или положение его родитель или любые другие элементы на всех. Нет абсолютно никакого способа изменить этот факт как transform строительство. Таким образом, чтобы создать эффект вращения элемента и иметь высоту его родителя относительно вращения, нам нужно сделать следующие вещи:

1. как построить какой-нибудь другое элемент, высота которого равна ширине .element-to-rotate
2. напишите наше преобразование на .element-to-rotate например, чтобы наложить его точно на элемент из Шаг 1.

элемент из Шага 1 должен быть .rotation-wrapper-outer. Но как мы можем вызвать его высота будет равна .element-to-rotate ' s ширина?

ключевым компонентом нашей стратегии здесь является padding: 50% 0 on .rotation-wrapper-inner. Этот подвиг эксцентричная деталь спецификации для padding: этот процент отступов, даже для padding-top и padding-bottom, всегда определяются как процент от ширина элемента контейнер. Это позволяет нам выполнить следующий двухэтапный трюк:

1. мы display: table on .rotation-wrapper-outer. Это заставляет его иметь сокращение-к-пригонки ширины, что означает, что его ширина будет установлена на основе внутренней ширины его содержимого - то есть на основе внутренней ширины .element-to-rotate. (При поддержке браузеров, мы могли бы достичь этого более чисто с width: max-content, но по состоянию на декабрь 2017, max-content и по-прежнему не поддерживается Край.)
2. ставим height на .rotation-wrapper-inner 0, затем установите его заполнение в 50% 0 (то есть 50% сверху и 50% вниз). Это приводит к тому, что он занимает вертикальное пространство, равное 100% ширины своего родителя - который, благодаря трюку в шаге 1, равен ширине .element-to-rotate.

далее, все, что остается, чтобы выполнить фактическое вращение и позиционирование дочернего элемента. Естественно,transform: rotate(-90deg) делает вращение; мы используем transform-origin: top left; чтобы вызвать вращение должно происходить вокруг верхнего левого угла повернутого элемента, что облегчает последующее перемещение, поскольку оно оставляет повернутый элемент непосредственно над тем местом, где он был бы нарисован в противном случае. Тогда мы можем использовать translate(-100%) чтобы перетащить элемент вниз на расстояние, равное его ширине перед вращением.

это все еще не совсем правильно позиционирует, потому что нам все еще нужно компенсировать 50% верхнего заполнения на .rotation-wrapper-outer. Мы достигаем этого, обеспечивая это .element-to-rotate и display: block (так что поля будут работать правильно на нем), а затем применить -50% margin-top - обратите внимание, что процент прибыли и определяется относительно ширины родительского элемента.

и это все!

почему это не полностью соответствует спецификации?

из-за следующее примечание из определения процентных отступов и полей в спецификации (жирный шрифт мой):

в процент рассчитывается по отношению к ширина из созданного поля содержащий блок, даже 'padding-top' и 'padding-bottom'. если ширина содержащего блока зависит от этого элемента, то результирующий макет не определен в CSS 2.1.

так как весь трюк вращался вокруг того, чтобы обивка внутреннего элемента обертки была относительно ширины его контейнера что, в свою очередь, зависело от ширины его дочернего элемента, мы сталкиваемся с этим условием и вызываем неопределенное поведение. В настоящее время он работает во всех 4 основных браузерах, хотя - в отличие от некоторых, казалось бы, spec-совместимых настроек, чтобы приблизиться к тому, что я пробовал, например, изменить .rotation-wrapper-inner быть родным братом .element-to-rotate вместо родительского.