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:
The length of the text can vary by culture and I want all divs to be aligned. Is it possible? I appreciate any help.
source to share
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;
}
source to share
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?
source to share