Clever Geek Handbook

CSS3: multiple pivot sections are vertically aligned

I have three or more divs and I want to rotate and align them vertically. I tried but couldn't find a solution.

Css:

.rotation {
  float: left;
  clear: both;
  width:100px;
}
.rotation .container {
  float: left;
  clear: both;
}
.rotation .rotate {
  float: left;
  margin-top: 20px;
  -ms-transform: rotate(90deg);
  /*IE 9*/
  -webkit-transform: rotate(90deg);
  /*Chrome, Safari, Opera*/
  transform: rotate(90deg);
  transform-origin: 50% 50% 0;
  background: #3c8d37;
  color: #fff;
  font-family:arial;
}

Html:

<div class="rotation">
  <div class="container">
    <div class="rotate">First Text</div>
  </div>
  <div class="container">
    <div class="rotate">Long Text Long Text</div>
  </div>
  <div class="container">
    <div class="rotate">Very Long Text Very Long Text</div>
  </div>
</div>

I am trying to do something like this:

enter image description here

The length of the text can vary by culture and I want all divs to be aligned. Is it possible? I appreciate any help.

+3


source to share


2 answers


You are thinking too much.

Don't rotate individual elements ... create it just like a normal horizontal div and then rotate the parent. It also makes the markup easier.

Html

<div class="rotation">
    <div class="rotate">First Text</div>
    <div class="rotate">Long Text Long Text</div>
    <div class="rotate">Very Long Text Very Long Text</div>
</div>


CSS

.rotation {
    display: inline-block;
    transform: rotate(90deg);
    transform-origin: bottom left;
}

.rotation .rotate {
    background: #3c8d37;
    color: #fff;
    font-family:arial;
    display: inline-block;
    padding:5px;

}

JSfiddle Demo

+6


source


It is possible. The trick is to put the pivot on the div .rotation

. I also changed transform-origin

so that the rotation starts from the bottom left, not the middle.

.rotation {
    -ms-transform: rotate(90deg);
    -ms-transform-origin: left bottom 0;
    /*IE 9*/
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left bottom 0;
    /*Chrome, Safari, Opera*/
    transform: rotate(90deg);
    transform-origin: left bottom 0;
}
.rotation:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    width: 100%;
}
.rotation .container {
    float: left;
}
.rotation .rotate {
    margin-right: 20px;
    background: #3c8d37;
    color: #fff;
    font-family:arial;
}


See the fiddle for the result. Is this how you wanted it?

+1


source






More articles:


All Articles