Html 轻松对齐旋转的按钮

我有5个旋转的按钮。对齐它们的最佳方法是什么，这样它们就不会重叠，这样我可以在需要时轻松调整高度/宽度？按钮需要垂直运行。起点是左上角，否则未旋转的第一个按钮将从该位置开始

目前看起来是这样的：

这是我正在做的旋转

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

---

将它们放在一个div中，根据您想要实现的目标将它们向左或向右浮动 *{框大小：boder框；填充：0；边距：0；} 主体{位置：相对；宽度：100vw；高度：100vh} .轮换{ 位置：绝对位置； 排名：0； 左：38px； 高度：40px； 背景：红色； 变换：旋转90度； 变换原点：左上； 填充：10px； } .旋转按钮{ 显示：内联； 浮动：左； } div:not[类=旋转]{ 左侧填充：40px； } 按钮1 按钮2 按钮3 按钮4 按钮5 按钮1 按钮2 按钮3 按钮4 按钮5