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

user_11297147 0
Viewed 64

* {
    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

enter image description here

Case 2

enter image description here

After apply transform- rotate, I want to start list section just from above grey section with no spacing like below image.

Expecting Result

enter image description here

Is there any other way to create this kind of design?

css-transforms css html
2 Answers

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>

user_86203330

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.

user_127019490
Related