Html 侧边栏中的旋转文本-css

我想制作一个侧边栏，文本在侧边栏内旋转并居中。我想要文本和css，而不是背景图像或其他东西…
在css中如何完成类似的操作

我尝试过使用

变换：旋转（7度）等，但我无法正确定位。

基本结构。顶栏应位于屏幕左侧（如图所示）

这也必须是响应性的。当您单击菜单切换时，侧边栏幻灯片将打开，这样文本就可以很容易地用css/js隐藏起来

谢谢

回答：

darrylyeo的回答对我来说是正确的。更简单的方法是按您的方式（水平）组合div，然后旋转整个div。

div中的旋转文本似乎更难正确定位所有响应断点。
使用一些JS最容易实现这一点。
单击菜单触发器中的事件，然后单击eventhandler函数以在屏幕上和屏幕外设置菜单动画。对于“旋转文本”功能，如果我正确理解了您的需求，那么您只需要以下内容：

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

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

变换定位：过程
在任何转换之前，确定维度是什么


选择要基于变换的定位点或原点。为您的目的找到最佳的锚定点可能需要一些尝试和错误


根据该定位点，确定图元的位置


最后，应用转换



第一次尝试
解释
要使此效果最佳，请按所列顺序一次添加一个属性


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

缺点
如果不相应地更改
左侧
，则无法调整
高度


更好的尝试
解释
与第一个解决方案相同，除了：


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

现在，要展开侧边栏，我们只需更改一个属性：
height
这个问题太广泛了。可能的答案太多。@Nicolas V请将您的代码与问题放在一起。您的问题不清楚，您所说的旋转文本是什么意思？@Srinivas08我想像图中所示那样旋转文本。。不知道有什么是不清楚的@这就是我来这里的原因。。我不知道怎么做。我在动画中添加了一个基本的代码笔，从我已经写的左边滑入。虽然你的代码笔看起来更干净。一定会在你的脑海中改变我的代码。这很有效！我只对文本进行了变换旋转，从未想过要旋转整个div。谢谢！啊，是的，我可以肯定地看到，仅转换文本将变得更加棘手。我很高兴你能成功！
.sidebar {
    background: #f6f6f6;
    width: 100vh;
    height: 60px;
    transform-origin: bottom left;
    position: absolute;
    left: 60px;
    bottom: 0;
    transform: rotate(-90deg);
}

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