Html 如何旋转<；部门>；保持一致？

我正在创建一个侧边栏导航面板，其中包含一些链接，我希望它们能够横向显示。以下是当前导航面板：

要分解它：

菜单图标

下面是图标的HTML

这是CSS：

/*菜单图标*/
.菜单栏容器{
宽度：100%；
身高：10%；
显示器：flex；
对齐项目：居中；
}
.菜单图标容器{
宽度：100%；
文本对齐：居中；
}
.菜单图标{
字号：19px；
颜色：暗灰色；
}

这些是导航链接，我想让它们垂直显示，而不是水平显示，下面是现有代码：

HTML：

{{--社交链接--}
{{--Facebook链接--}
{{--Instagram链接--}
{{--Twitter链接--}

CSS：

/*社交链接*/
.社交链接容器{
宽度：100%；
身高：80%；
显示器：flex；
对齐项目：居中；
}
.dot图标容器{
边距内联开始：30px；
边距内联端：30px；
}
.点图标{
字体大小：10px；
}

当我添加

变换时：旋转（-90度）

到

.social links容器

类结果如下：

---

我如何旋转这些并使它们居中？谢谢

使用

写入模式：垂直lr

：

/*社交链接*/
.社交链接容器{
身高：80%；
显示器：flex；
对齐项目：居中；
书写方式：垂直lr；
证明内容：中心；
变换：旋转（180度）；
}

使用

写入模式：垂直lr

：

/*社交链接*/
.社交链接容器{
身高：80%；
显示器：flex；
对齐项目：居中；
书写方式：垂直lr；
证明内容：中心；
变换：旋转（180度）；
}

尝试变换原点。如果你能提供一份工作报告，回答这个问题会很有帮助snippet@SagarV这不是一个可能的解决方案，因为这给了我同样的问题，它不在80%柱变换的起点。如果你能提供一份工作报告，回答这个问题会很有帮助snippet@SagarV这不是一个可能的解决方案，因为这给了我同样的问题，在80%柱的中间，这是完美的。我不得不加上

宽度：100%但除此之外，解决方案是当场！这工作做得很好！我不得不加上
宽度：100%但除此之外，解决方案是当场！