在侧栏中旋转文本 - css

Question

我想创建一个侧边栏，文本在侧边栏内旋转并居中。我希望这在文本和CSS中，而不是背景图像或其他东西...
如何在css中完成这样的事情？

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

这也必须有回应。当您单击菜单切换时，侧边栏幻灯片将打开，以便使用某些css / js轻松隐藏文本。

由于

ANSWERED：
@darrylyeo的答案对我来说是正确的解决方案。很多simpeler像你一样（水平地）组成div然后旋转整个div div中的旋转文本似乎更难以定位所有响应断点。

Answer 1

使用转换定位：过程

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度。

下行

您无需相应更改height即可调整left。

更好的尝试

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

说明

与第一个解决方案相同，但是：

• 将转换锚点设置为左上角角落。
• 从左侧开始0像素，从顶部开始 100％。这意味着元素的顶部接触视口的底部。
• 现在，逆时针旋转锚点90度。

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

Answer 2

你最容易实现这一点。 单击“事件”菜单触发器，然后单击“事件处理程序”功能，以打开和关闭菜单的动画。对于旋转文本功能，如果我正确理解了您想要的内容，您只需要：

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

此处是代码笔的链接，单击粉红色的左上方菜单徽标，然后将鼠标悬停在列表项上。

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