0

.wrap-toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 100%;
  background-color: #FFF8DC;
  border-right: 1px solid #FFE4E1;
}

.toggle {
  background-color: red;
  position: relative;
  top: 50%;
  right: 0;
  display: inline-block;
  cursor: pointer;
  font-family: Verdana, Arial;
  letter-spacing: 2px;
  color: #138ab2;
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
<div class="wrap-toggle">
  <span class="toggle">Справка</span>
</div>

1 ответ 1

4

Потому что точка поворота стоит не так как вам нужно. Вам нужно что бы точка поворота была в верхнем левом углу. Смотрите пример. Свойство transform-origin

.wrap-toggle {
  position:absolute;
  top:0;
  left:0px;
  width:34px;
  height:100%;
  background-color:#FFF8DC;
  border-right:1px solid #FFE4E1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.toggle {
    display: flex;
    cursor: pointer;
    font-family: Verdana, Arial;
    letter-spacing: 2px;
    color: #138ab2;
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg) translateY(0);
    width: 34px;
    line-height: 0px;
    height: 34px;
    align-items: center;
    justify-content: center;
}
<div class="wrap-toggle">
  <span class="toggle">Справка</span>
</div>

UPD обновил. Но единственный костыль в том, что высота и ширина .toogle должна быть равна ширине родителя.

8
  • Толи я ослеп, то ли что-то еще... Не видел ответа... И написал свой..))
    – Air
    16 мая 2018 в 6:43
  • @Air видел) не успел поставить +1 для абуза (спортивного поведения)
    – lazyproger
    16 мая 2018 в 6:44
  • В другой раз...))) А то скажут чужие вопросы копирую))))
    – Air
    16 мая 2018 в 6:45
  • Данный текст мне необходимо расположить в родительском блоке по центру. У элемента span отсчёт координат ведётся от левого верхнего угла. Поставил у свойства transform-origin: 50% 100% 0; Но результат не верный.
    – ikar
    16 мая 2018 в 6:57
  • @ikar посмотрите))
    – lazyproger
    16 мая 2018 в 7:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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