CSS3: несколько поворотных divs по вертикали выровнены

Question

У меня есть три или более div, и я хочу повернуть их и выровнять по вертикали. Я пробовал, но не нашел решения.

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 хотите, чтобы все div были выровнены. Это возможно? Я ценю любую помощь.

Answer 1

Вы слишком задумываетесь над вещами.

Не поворачивайте отдельные предметы ... создавайте его, как обычный горизонтальный div, а затем вращайте родителя. Это также упрощает размеченные

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

Answer 2

Это возможно , Хитрость заключается в том, чтобы повернуть поворот на div .rotation. Я также изменил transform-origin так, чтобы вращение начиналось с нижнего левого, а не на середину.

.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; 
} 

См. Результат fiddle. Это так, как вы этого хотели?