Трансформирование элемента с помощью css transform (rotate) и его финальное положение на странице

124

27 ноября 2019, 22:00

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

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

Answer 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>