1

При трансформировании элемента, например, повороте на 90%, элемент поворачивается от своего центра.

Вопрос: как повернуть элемент, чтобы его прибило к краю блока?

Наглядно

4
  • Павел, серый блок, это позиция элемента до трансформации. После трансформации, блок центрируется, так происходит, потому что его положение на странице остается прежним. А нужно, чтобы он занимал свое место исходя из новых данных.
    – Bareza
    13 мар 2019 в 1:57
  • Павел, нет, наверное я плохо объясняю. Поворот центрирует этот блок относительно его самого. А нужно его прибить влево.
    – Bareza
    13 мар 2019 в 2:07
  • Да, как видите, он вращается относительно своего центра, и его законный отступ слева теперь другой. Т.е. мне приходится его сдвигать влево, опять же трансформацией.
    – Bareza
    13 мар 2019 в 2:11
  • Давайте продолжим обсуждение в чате.
    – Bareza
    13 мар 2019 в 2:15

1 ответ 1

1

В общем ...применил flexbox, в котором стилизуем положение текста и линии с одного разрешения на другое через order, а положение родительского блока при вёрстке само по себе имеет позицию в самом верху слева ...

Если нам потребуется с десктопной версии перевернуть блок т.е сделать его вертикальным нам не надо поворачивать или ещё что то а просто указать width и height который требуется

Здесь полный эксперимент + 100% рабочая версия: https://codepen.io/topicstarter/pen/drZKEX

.item {
  display: inline-block;
  background: red;
  text-align: center;
  padding: 10px;
}

.item div:first-child {
  display: inline-block;
  text-align: center;
  margin-bottom: 20px;
  height: 50px;
  width: 2px;
  background: #fff;
}

.item div:last-child {
  writing-mode: vertical-rl;
  color: #FBFBFB;
  font-size: 20px;
}

@media(max-width:768px) {
  .item {
    display: flex;
    flex-direction: column;
    width: 18px;
    align-items: center;
  }
  .item div:first-child {
    order: 2;
    margin-top: 20px;
  }
  .item div:last-child {
    order: 1;
  }
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="item">
  <div></div>
  <div class="text">о компании</div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.