How to center a rotated element and align it to the top? - html

Question

* {
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
margin: 0px;
}
.we-adopt {
background-color: #8a8484;
color: #ffffff;
padding: 88px 0px;
height: 100px;
}
.we-adopt-list span {
display: inline-block;
vertical-align: top;
padding: 16px 60px 16px 24px;
background-color: #222222;
color: #ffffff;
width: 100%;
}
.we-adopt-list li {
color: #FFFFFF;
font-size: 32px;
font-weight: 500;
letter-spacing: 1.6px;
line-height: 24px;
margin-bottom: 70px;
text-transform: uppercase;
}
.we-adopt-list ul {
display: inline-block;
transform: rotate(-90deg) translateY(-50%);
position: relative;
left: 50%;
}
.we-adopt-list {
position: relative;
}
.we-adopt-list li:last-child {
margin-bottom: 0px;
}
<section class="we-adopt" style="height: 100px;">
</section>
<section class="we-adopt-wrap">
<div class="container">
<div class="we-adopt-list">
<ul>
<li><span>Mental agility</span></li>
<li><span>Emotional agility</span></li>
<li><span>Trust</span></li>
</ul>
</div>
</div>
</section>
Whenever i apply transform- rotate property to my list section its overlap or some time its take space from above content.
Case 1
Case 2
After apply transform- rotate, I want to start list section just from above grey section with no spacing like below image.
Expecting Result
Is there any other way to create this kind of design?

Answer 1

Consider transform-origin and update the transform like below:
* {
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
margin: 0px;
}
.we-adopt {
background-color: #8a8484;
color: #ffffff;
padding: 88px 0px;
height: 100px;
}
.we-adopt-list span {
display: inline-block;
vertical-align: top;
padding: 16px 60px 16px 24px;
background-color: #222222;
color: #ffffff;
width: 100%;
}
.we-adopt-list li {
color: #FFFFFF;
font-size: 32px;
font-weight: 500;
letter-spacing: 1.6px;
line-height: 24px;
margin-bottom: 70px;
text-transform: uppercase;
}
.we-adopt-list ul {
display: inline-block;
transform-origin: top left;
transform: rotate(-90deg) translateX(-100%) translateY(-50%);
position: relative;
margin: 0;
left: 50%;
}
.we-adopt-list {
position: relative;
}
.we-adopt-list li:last-child {
margin-bottom: 0px;
}
<section class="we-adopt" style="height: 100px;">
</section>
<section class="we-adopt-wrap">
<div class="container">
<div class="we-adopt-list">
<ul>
<li><span>Mental agility</span></li>
<li><span>Emotional agility</span></li>
<li><span>Trust</span></li>
</ul>
</div>
</div>
</section>

Answer 2

transform: rotate is a purely visual effect. It doesn't alter the flow of the page. To position it how you want you'd have to use transform: translate or margin or something else.