轻松对齐旋转按钮答案

【问题标题】：aligning rotated buttons easily轻松对齐旋转按钮
【发布时间】：2014-09-21 21:10:20
【问题描述】：

我有 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;
}

【问题讨论】：

标签： html css rotation

【解决方案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>

【讨论】：