基于CSS3的面板

我有一个基于CSS3的滑出式面板。如何使此幻灯片垂直展开？非常感谢你的帮助

* { 保证金：0； 填充：0； 字体系列：Helvetica Neue，Helvetica，无衬线； 字距：-2px； } h1{ 字体大小：40px； 字体大小：粗体； 颜色：191919； -webkit字体平滑：抗锯齿； } 氢{ 字体大小：正常； 字体大小：20px； 颜色：888； 填充：5px0； } .留言{ 背景：181818； 颜色：FFF； 位置：绝对位置； 顶部：-250px； 左：0； 宽度：100%； 高度：250px； 填充：20px； 过渡：顶部300毫秒立方贝塞尔0.17,0.04,0.03,0.94； 溢出：隐藏； 框大小：边框框； } .信息h1{ 颜色：FFF； } 拨动{ 位置：绝对位置； 外观：无； 光标：指针； 左-100%； 前-100%； } 切换+标签{ 位置：绝对位置； 光标：指针； 填充：10px； 背景：26ae90； 宽度：100px； 边界半径：3px； 填充：8px 10px； 颜色：FFF； 线高：20px； 字体大小：12px； 文本对齐：居中； -webkit字体平滑：抗锯齿； 光标：指针； 利润率：20px 50px； 过渡：所有500ms缓解； } 切换+标签：之后{ 内容：开放 } .集装箱{ 过渡：边缘300ms立方贝塞尔0.17,0.04,0.03,0.94； 填充物：5em 3em； } 切换：选中~。消息{ 排名：0； } 切换：选中~.container{ 边缘顶部：250px； } 切换：选中+标签{ 背景：dd6149； } 切换：选中+标签：之后{ 内容：关闭 } 纯CSS3滑下切换演示 单击“打开”按钮查看内容 这里隐藏的信息 CSS3滑出菜单 因此，我切换了一些顶部和左侧的值，确保按钮的位置随着其余内容的变化而变化，等等，最终我得到了以下代码：

* { 保证金：0； 填充：0； 字体系列：Helvetica Neue，Helvetica，无衬线； 字距：-2px； } h1{ 字体大小：40px； 字体大小：粗体； 颜色：191919； -webkit字体平滑：抗锯齿； } 氢{ 字体大小：正常； 字体大小：20px； 颜色：888； 填充：5px0； } .留言{ 背景：181818； 颜色：FFF； 位置：绝对位置； 排名：0； 左：-250px； 宽度：250px； 身高：100%； 填充：20px； 过渡：左300ms立方贝塞尔0.17,0.04,0.03,0.94； 溢出：隐藏； 框大小：边框框； } .信息h1{ 颜色：FFF； } 拨动{ 位置：绝对位置； 外观：无； 光标：指针； 左-100%； 前-100%； 左边距：0； 过渡：左边距300ms立方贝塞尔0.17,0.04,0.03,0.94； } 切换+标签{ 位置：绝对位置； 光标：指针； 填充：10px； 背景：26ae90； 宽度：100px； 边界半径：3px； 填充：8px 10px； 颜色：FFF； 线高：20px； 字体大小：12px； 文本对齐：居中； -webkit字体平滑：抗锯齿； 光标：指针； 利润率：20px 0 20px 50px； 过渡：背景500毫秒宽，边缘300毫秒立方贝塞尔0.17,0.04,0.03,0.94； } 切换+标签：之后{ 内容：开放 } .集装箱{ 过渡：边缘300ms立方贝塞尔0.17,0.04,0.03,0.94； 填充物：5em 3em； } 切换：选中{ 左边距：250像素； } 切换：选中~。消息{ 左：0； } 切换：选中~.container{ 左边距：250像素； } 切换：选中+标签{ 利润率：20px 0 20px 300px； 背景：dd6149； } 切换：选中+标签：之后{ 内容：关闭； } 纯CSS3滑下切换演示 单击“打开”按钮查看内容 这里隐藏的信息 CSS3滑出菜单 你是说水平的吗？面板已经垂直滑出。