是否可以旋转按钮组并将其固定到窗口的侧面

Question

我希望创建一个按钮组并将其对齐到屏幕的左侧。类似的东西。

我在这里取得了一些成功 - http://jsfiddle.net/5KQNP/使用

-webkit-transform-origin: 0% 0%; -webkit-transform: rotate(-90deg);

但我无法正确坐下，按钮组需要指定一个手动宽度，它位于屏幕之外，而不是与主容器齐平。

有人有什么建议吗？

Answer 1

 #sidebar {
     position:relative;
     height:20px;
     margin-left:20px; /* same as height of menu */
     left:-400px; /*same as menu width */
     -webkit-transform: rotate(-90deg); 
     -moz-transform: rotate(-90deg);     }

 #sidebar > sidebar-collapsed-nav {
     width:400px; }

Answer 2

最好的方法是围绕左下角旋转，即：

.sidebar-collapsed-nav {
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: 0 100%;
}

此属性产生了问题:(删除它）

.sidebar-expanded {
    padding-left: 10px;
}

fiddle