轻松对齐旋转的按钮

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>