CODEWITHSUNDEEP
htmlcssrotation
kalabalik
kalabalik

Reputation: 3832

How to align a rotated element to a non-rotated one

In a sidebar, I want to stack a rotated element on top of another element. The distance between these two elements needs to be reliably close - thus, independent of window or screen sizes.

Here is my HTML code:

.sidebar {
        width: 100px;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        border-left: 2px solid black;
    }
    
    .sidebar div.bottom {
        text-align: center;
        width: 100%;
        position: absolute;
        bottom: 0px;
        display: flex;
        flex-direction: column-reverse;
    }
    
    .sidebar div.rotate {
        width: 100%;
        white-space: pre;
        line-height: 1;
        transform: rotate(-90deg);
        text-align: left;
        border: 1px dashed red;
    }
    
    .sidebar div.no-rotate {
        border: 1px dotted orange;
    }
<div class="sidebar">
      <div class="bottom">
      <div>something something</div>
        <div class="no-rotate">^^^</div>
        <div class="rotate">
          <span>short</span>
          <span>much longer</span>
          <span>even longer than the others</span>
        </div>
      </div>
    </div>

As you can see in the fiddle, the .rotate class is overlapping the .no-rotate class. This is due to the rotation - the hypothetical box of the .rotate class PRIOR TO ROTATION is stacked exactly on the .no-rotate class. After rotation this is not true anymore. And above that, I am clueless how I would align my rotated spans with the bottom of that box.

I am aware that I can change the distance between the two elements by putting translateY() into the transform statement. This does not, however, give me a fixed spatial relation between the two elements - independent of window or screen sizes.

Is there some easy solution here that I am missing? Or do I need to find a different approach altogether?

Upvotes: 0

Views: 85

Answers (1)

beerwin
beerwin

Reputation: 10327

Use transform-origin. That property allows you to influence the point around which the object is rotated.

The closest thing I was able to achieve is this:

transform-origin: 40% 40%;


.sidebar {
        width: 100px;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        border-left: 2px solid black;
    }
    
    .sidebar div.bottom {
        text-align: center;
        width: 100%;
        position: absolute;
        bottom: 0px;
        display: flex;
        flex-direction: column-reverse;
    }
    
    .sidebar div.rotate {
        width: 100%;
        white-space: pre;
        line-height: 1;
        transform: rotate(-90deg);
        transform-origin: 40% 40%;
        text-align: left;
        border: 1px dashed red;
    }
    
    .sidebar div.no-rotate {
        border: 1px dotted orange;
    }
<div class="sidebar">
      <div class="bottom">
      <div>something something</div>
        <div class="no-rotate">^^^</div>
        <div class="rotate">
          <span>short</span>
          <span>much longer</span>
          <span>even longer than the others</span>
        </div>
      </div>
    </div>

Upvotes: 1

Related Questions