使用CSS3转换将DIV打开-TurnaDIVonsideusingCSS3transformation

I have a menu that has to appear on side rotated -90 degrees as depicted below.

我有一个菜单必须出现在旋转-90度的侧面，如下图所示。

NOTE: the DIV has a dynamic width so we can not rotate it and then shift it to left or top using top:-XX.

注意:DIV具有动态宽度，所以我们不能旋转它，然后使用top:-XX将它向左或向上移动。

#rotateme {
    -webkit-transform: rotate(-90deg); 
    -webkit-transform-origin: 0 0; 
    position: absolute; 
    top: 250px; /*not going to work with dynamic width */
    left: 0px; 
}

I tried alot using CSS3 transformation and transformation-origin but no combination could get me there.

我尝试了很多用CSS3变换和变换原点的方法，但是没有任何组合能让我到达那里。

I have created a fiddle here (http://jsfiddle.net/P2UQy/8/) that creates the content of the div randomly (dynamic width). This fiddle also includes a failure attempt to rotate using CSS3 transform.

我在这里创建了一个fiddle (http://jsfiddle.net/P2UQy/8/)，它可以随机地创建div的内容(动态宽度)。这个小提琴还包括一个使用CSS3转换的失败尝试。

Can anyone get it work like shown in the picture above? Feel free to add more containers/wrappers if needed.

有人能像上图所示的那样工作吗?如果需要，可以添加更多的容器/包装器。

1 个解决方案