使用CSS3转换在侧面转动DIV

时间:2012-07-26 16:04:54

标签: css css3 rotation css-transforms rotatetransform

我有一个菜单必须在侧面旋转-90度,如下所示。

enter image description here

注意: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; 
}

我尝试了很多使用CSS3转换和转换起源但没有任何组合可以让我在那里。

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

任何人都可以像上图所示那样工作吗?如果需要,可以随意添加更多容器/包装。

1 个答案:

答案 0 :(得分:4)

我已更新您的fiddle。希望它能运作。