rotated text in sidebar - css [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
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?
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 1

Positioning With Transforms: The Process
Determine what the dimensions are, before any transformations.
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.
Based on that anchor point, figure out where to position the element.
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.

Answer 2

You will achieve this with some JS the easiest.
Click Event the the Menu trigger, and then the eventhandler function to animate the menu on and off screen. For the rotate text functionality, if I understood properly what you want, all you need is this:
#menu li {
margin-top: 3px;
font-size: 14pt;
transition:.5s;
}
li:hover{
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);}
Here the link to a code pen, click the pink top left menu logo and then hover over the list items.
http://codepen.io/damianocel/pen/XXbymL