회전 된 버튼을 쉽게 정렬

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

하나 개의 사업부에 모두 넣어 회전하고있어 무엇의에 따라 그들에게 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>