边栏中的旋转文本 - css

Question

我想制作一个边栏，其中的文本在边栏内旋转并居中。我想要这个在文本和 css 中，而不是背景图片或其他东西...
在 css 中如何完成这样的事情？

我尝试使用 transform: rotate(7deg); 之类的东西，但我无法正确定位它。
Here is a codepen 基本结构。顶部栏应该在屏幕的左侧（如图所示）。

这也必须是响应式的。当您单击菜单切换侧边栏幻灯片打开时，文本应该很容易隐藏一些 css/js。

谢谢

已回答：
@darrylyeo 的回答对我来说是正确的解决方法。像您（水平）那样组成 div 然后旋转整个 div.
更简单 div 中的旋转文本似乎更难定位所有响应断点。

Answer 1

你会用一些 JS 来实现这个最简单的。 单击 Menu 触发器的 Event，然后单击 eventhandler 函数以在屏幕上和屏幕外设置菜单动画。对于旋转文本功能，如果我正确理解你想要什么，你只需要这个：

#menu li {
margin-top: 3px;
font-size: 14pt;
transition:.5s;
}
li:hover{
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);}

这里是link代码笔，点击左上角的粉红色菜单标志，然后将鼠标悬停在列表项上。

http://codepen.io/damianocel/pen/XXbymL

Answer 2

使用变换定位：过程

1. 确定维度是什么，在任何转换之前。

2. 选择一个锚点或原点作为转换的基础。为您的目的找到最佳锚点可能需要反复试验。

3. 根据该锚点，确定元素的放置位置。

4. 最后，应用转换。

---

第一次尝试

.sidebar {
    background: #f6f6f6;
    width: 100vh;
    height: 60px;
    transform-origin: bottom left;
    position: absolute;
    left: 60px;
    bottom: 0;
    transform: rotate(-90deg);
}

说明

为了最好地形象化，请按所列顺序一次添加一个 属性。

• 应用背景颜色以便我们可以看到边栏的位置。
• 将宽度设置为视口 高度 的 100%。
• 将高度设置为（比如）60 像素。
• 绝对位置（fixed 也可以）。
• 将变换锚点设置到左下角。
• 位置距左侧 60 像素（或您设置的任何高度），距底部 0 像素。
• 现在，围绕锚点逆时针旋转 90 度。

缺点

如果不相应地更改 left，则无法调整 height。

---

更好的尝试

.sidebar {
    background: #f6f6f6;
    width: 100vh;
    height: 60px;
    transform-origin: top left;
    position: absolute;
    left: 0;
    top: 100%;
    transform: rotate(-90deg);
}

说明

与第一个解决方案相同，除了：

• 将变换锚点设置到左上角。
• 位置距左侧 0 像素，距顶部 100%。这意味着元素的顶部接触视口的底部。
• 现在，围绕锚点逆时针旋转 90 度。

现在，要扩展侧边栏，我们只需更改一个属性：height。