Был текст, я его повернул на -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>