轻松对齐旋转的按钮
问题描述:
我有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;
}
答
把他们都在一个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>