Nicolas V Nicolas V - 6 months ago 23
CSS Question

rotated text in sidebar - css

I want to make a sidebar where the text is rotated and centered inside the sidebar. I want this in text and css, not background image or something...

How would something like this be done in css?

enter image description here

I have tried to use

transform: rotate(7deg);
and stuff, but I can't position it correctly.

Here is a codepen with the basic structure. The topbar should be on the left side of the screen (like in the picture).

This also has to be responsive. And when you click the menu toggle the sidebar slides open so the text should be easily hidden with some css/js.

Thanks

ANSWERED:

The answer from @darrylyeo was the right fix for me. Much simpeler to make up the div as you would (horizontally) and then rotate the whole div.

Rotation text inside a div seemed to be more difficult to position right all the responsive breakpoints.

Answer

Positioning With Transforms: The Process

  1. Determine what the dimensions are, before any transformations.

  2. Choose an anchor point, or origin, to base the transformation on. Finding the best anchor point for your purpose may take some trial and error.

  3. Based on that anchor point, figure out where to position the element.

  4. Finally, apply the transformation.


First Attempt

.sidebar {
    background: #f6f6f6;
    width: 100vh;
    height: 60px;
    transform-origin: bottom left;
    position: absolute;
    left: 60px;
    bottom: 0;
    transform: rotate(-90deg);
}

Explanation

To visualize this best, add one property at a time in order as listed.

  • Apply a background color so we can see where the side bar is.
  • Set the width to 100% the height of the viewport.
  • Set the height to (say) 60 pixels.
  • Position absolutely (fixed would work as well).
  • Set the transformation anchor point to the bottom left corner.
  • Position 60 pixels from the left (or whatever you set the height to be), and 0 pixels from the bottom.
  • Now, rotate around the anchor point counterclockwise by 90 degrees.

Downside

You can't adjust height without having to change left accordingly.


Better Attempt

.sidebar {
    background: #f6f6f6;
    width: 100vh;
    height: 60px;
    transform-origin: top left;
    position: absolute;
    left: 0;
    top: 100%;
    transform: rotate(-90deg);
}

Explanation

Same as the first solution, except:

  • Set the transformation anchor point to the top left corner.
  • Position 0 pixels from the left, and 100% from the top. This means that the top of the element touches the bottom of the viewport.
  • Now, rotate around the anchor point counterclockwise by 90 degrees.

Now, to expand the sidebar, we have only to change one property: height.