Как динамически подогнать повернутый элемент к родительскому элементу с помощью CSS? - PullRequest
Новая
       11

Как динамически подогнать повернутый элемент к родительскому элементу с помощью CSS?

0 голосов
/ 05 марта 2020

У меня есть 2 деления: .container и его дочерний элемент .element.
Контейнер центрируется на странице, оба элемента имеют position: absolute и имеют vw и vh для ширины и высоты.

Разница между ними заключается в том, что родительский элемент имеет 25vh для высоты и 25vw для ширины, однако дочерний элемент имеет противоположное значение: 25vh для ширины и 25vw для высоты. Это означает, что ширина одного эквивалентна высоте другого.

Затем я использовал transform: rotate(90deg) для поворота дочернего элемента div. Теперь они выглядят одинаково.

Я хочу переместить только дочерний элемент , чтобы он динамически вписывался в родительский элемент. Но я этого не сделаю. Я пытался использовать свойства позиционирования, transform-origin, translate и т. Д. С процентами или vw и vh единицами, но ничего не работает.

Как вписать этот div в родительский div, пока остаётся таким же образом на любом размере экрана? 

body {
  background-color: #333;
}
.container {
  background-color: #000;
  position: absolute;
  height: 25vh;
  width: 25vw;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.element {
  position: absolute;
  background-color: #abc;
  transform: rotate(90deg);
  height: 25vw;
  width: 25vh;
}
<div class="container">
  <div class="element"></div>
</div>

1 Ответ

1 голос
/ 05 марта 2020

Вам нужно учитывать transform-origin, а некоторые translation тоже 

body {
  background-color: #333;
}

.container {
  background-color: #000;
  position: absolute;
  height: 25vh;
  width: 25vw;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.element {
  position: absolute;
  background-color: #abc;
  height: 25vw;
  width: 25vh;
  transform: translateY(-100%) rotate(90deg);
  transform-origin: bottom left;
}
<div class="container">
  <div class="element"></div>
</div>
...