在侧栏中旋转文本 - css

Question

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

我曾试图使用transform: rotate(7deg);和填充,但我无法正确定位.
这是一个具有基本结构的codepen.顶部栏应位于屏幕的左侧(如图所示).

这也必须是响应.当您单击菜单切换时,侧边栏幻灯片将打开,因此应使用某些css/js轻松隐藏文本.

谢谢

答案: @darrylye的答案对我来说是正确的解决方案.很多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.