выравнивание поворотных кнопок легко

Question

У меня есть 5 кнопок, которые я вращаю. Каков наилучший способ выровнять их так, чтобы они не перекрывались, и поэтому я могу легко регулировать высоту/ширину, когда это необходимо? Кнопки должны работать по вертикали. Отправной точкой является верхний левый угол, в котором была бы запущена первая кнопка, которая не была бы отключена.

В настоящее время выглядит следующим образом:

http://jsfiddle.net/JasonJSFiddle/3ypja9om/

Вот что я делаю, чтобы повернуть

button.rotate { 
    width:100px; 
    height:40px; 

    -webkit-transform: translateY(-100%) rotate(-90deg); /* Safari */ 
    -moz-transform: translateY(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */ 
    -ms-transform: translateY(-100%) rotate(-90deg); /* IE9 */ 
    -o-transform: translateY(-100%) rotate(-90deg); /* Opera */ 
    transform: translateY(-100%) rotate(-90deg); /* W3C */ 
    -webkit-transform-origin: left top; 
    -moz-transform-origin: left top; 
    -ms-transform-origin: left top; 
    -o-transform-origin: left top; 
    transform-origin: left top; 
} 

Answer 1

поместить их все в одном DIV, поплавок их left или right в зависимости от того, что вы хотите достичь

*{box-sizing:boder-box;padding:0; margin:0;} 
 
body{position:relative;width:100vw;height:100vh} 
 
.rotate { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 38px; 
 
    height: 40px; 
 
    background: red; 
 
    transform: rotate(90deg); 
 
    transform-origin: left top; 
 
    padding:10px; 
 
} 
 
.rotate button{ 
 
    display:inline; 
 
    float: left; 
 
} 
 
div:not([class=rotate]){ 
 
    padding-left: 40px; 
 
}

<div><button>button 1</button></div> 
 
<div><button>button 2</button></div> 
 
<div><button>button 3</button></div> 
 
<div><button>button 4</button></div> 
 
<div><button>button 5</button></div> 
 

 
<div class="rotate"> 
 
    <button>button 1</button> 
 
    <button>button 2</button> 
 
    <button>button 3</button> 
 
    <button>button 4</button> 
 
    <button>button 5</button> 
 
</div>