1

Был текст, я его повернул на -90 градусов и когда пытаюсь выровнять по верхнуму краю то выходит проблема что он выравнивается относительно центра. Понятно что это ибо браузер воспринимает блок все так же горизонтально но отображает контент повернутым. Но есть ли способ это обойти?

https://codepen.io/Telion/pen/aeBxMr

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
.main-view {
    width: 100%;
    height: 100%;
    background: #000;
    padding: 10px;
    display: flex;
    flex-flow: row nowrap;
    box-sizing: border-box;
}
.colon {
    width: 25%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}
.colon>div {
    background: #fff;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}
.colon>div>div {
    transform: rotate(270deg);
    white-space: nowrap;
    font-size: 9vh;
    align-self: flex-start;
}
<div class="main-view">
  <div class="colon">
    <div>
      <div>COLLABORATOR</div>
    </div>
  </div>
  <div class="colon">
    <div>
      <div>PROGRAMMER</div>
    </div>
  </div>
  <div class="colon">
    <div>
    <div>DESIGNER</div>
    </div>
  </div>
  <div class="colon">
    <div>
      <div>CREATOR</div>
    </div>
  </div>
</div>

1 ответ 1

1

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.main-view {
  width: 100%;
  height: 100%;
  background: #000;
  padding: 10px;
  display: flex;
  flex-flow: row nowrap;
  box-sizing: border-box;
}

.colon {
  width: 25%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.colon>div {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #fff;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.colon>div>div {
  height: 100%;
  transform: translateY(-15%);
}

.colon>div>div>div {
  margin: 0.7em 0;
  transform: rotate(270deg) translateX(-50%);
  font-size: 9vh;
}
<div class="main-view">
  <div class="colon">
    <div>
      <div>
        <div>COLLABORATOR</div>
      </div>
    </div>
  </div>
  <div class="colon">
    <div>
      <div>
        <div>PROGRAMMER</div>
      </div>
    </div>
  </div>
  <div class="colon">
    <div>
      <div>
        <div>DESIGNER</div>
      </div>
    </div>
  </div>
  <div class="colon">
    <div>
      <div>
        <div>CREATOR</div>
      </div>
    </div>
  </div>
</div>

Так? Свойство transform-origin в помощь

2
  • Нужно что б текст шел от верхней границы. Для этого там свойство align-self: flex-start;.
    – Telion
    28 июл 2019 в 11:30
  • @Telion, вроде получилось :) 28 июл 2019 в 12:10

Ваш ответ

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

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