Helping you build a better website
(and other interesting web stuff)

CSSHTMLJavaScriptjQueryMSSQLMySQLPHPSilvaTechnologiesWordpress
Silva Web Designs - Blog

How to Transform a Rotated Element That is Fixed to the Sidebar

Have you ever wanted to have a fixed element on the sidebar, whether it be on the left or right side of the page. It’s pretty simple to do but when you rotate the element, you might notice that the positioning goes away from the sidebar.

Here is an example of the kind of thing I’m talking about here:

You see the ‘Book a free consultation’ text? That’s what we’re talking about here…

How to create a fixed rotated left sidebar element

So let’s say we have the following HTML:-


<div id="left-sidebar">
  <h6>
    LEFT SIDEBAR
  </h6>
</div>

To make this fixed to the left position and vertically centred regardless of the width and height of the element, we can do the following:


#left-sidebar {
  position: fixed;
  display: block;
  background: #ae77b3;
  top: 50%;
  left: 0;
  padding: 10px 20px;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: left top;
  color: #FFF;
  letter-spacing: 2px;
}

The key thing to get the positioning correct (fixed to the sidebar) is the transform-origin property. Since it’s a left aligned sidebar we are using ‘left top’, this will remove the gap when you do the rotation. What keeps the element centred on the page regardless of the width is the transform property. You can see we added ‘translateX(-50%)’, this is what is correcting this issue. Pretty neat huh?

How to create a fixed rotated right sidebar element

This one is similar to the left sidebar, we just change a couple of values here…

So now we have the following HTML:


<div id="right-sidebar">
  <h6>
    RIGHT SIDEBAR
  </h6>
</div>

and here is the CSS to go with it:


#right-sidebar {
  position: fixed;
  display: block;
  background: #ae77b3;
  top: 50%;
  right: 0;
  padding: 10px 20px;
  transform: rotate(-270deg) translateX(50%);
  transform-origin: right top;
  color: #FFF;
  letter-spacing: 2px;
}

You will see we made two changes here… Since it is right-aligned now, we change the transform property and the transform-origin. We rotated it the other way around using -270deg and made transforms 50% instead of -50%. With the origin, we simply changed it from left top to right top. Pretty straight forward right?

If you want to check out the JSFiddle for the above example click here.

Well, that wraps up today’s tutorial, we hope this helps you! As always, if you have any queries then simply drop us a comment below.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

Join the discussion