Html 如何使用CSS旋转导航栏中的元素？

我试图让我的导航栏在我的WordPress网站上旋转，但无法使其居中并靠近屏幕左侧

这是我现在得到的屏幕截图：

这是我正在使用的CSS代码：

nav.standard {
    position: fixed;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

---

这里有一个干净的方法来做到这一点，并让它坚持在页面的一边

相关比特的逐行细分（下面是完整的现场演示）：

/*修复该条*/
位置：固定；
/*由于我们正在旋转，请将其宽度设置为屏幕高度*/
宽度：100vh；
底部：0；
/*按杆的高度（2米）将杆推入屏幕*/
右：2米；
线高：2米；
/*顺时针旋转90度*/
变换：旋转（90度）；
/*使用右下角作为旋转点*/
变换原点：100%100%；

.nav{
列表样式：无；
保证金：0；
填充：0；
文本对齐：居中；
空白：nowrap；
位置：固定；
宽度：100vh；
底部：0；
右：2米；
线高：2米；
变换：旋转（90度）；
变换原点：100%100%；
}
李国荣先生{
显示：内联块；
边缘：0 1米；
}

第1页
第2页
第3页
第4页

您可以使用

写入模式：垂直lr与
变换组合：旋转（180度）


正文{
背景色：#eee；
}
导航标准{
位置：绝对位置；
左：0；
排名：0；
底部：0；
文本对齐：居中；
-webkit写作模式：垂直lr；
-moz写入方式：垂直lr；
-ms写入方式：垂直lr；
书写方式：垂直lr；
变换：旋转（180度）；
背景色：#FFF；
}
导航标准a{
颜色：#333；
文字装饰：无；
显示：内联块；
填充：0.8em 0.4em；
字体大小：.75rem；
}

你好，乔恩！我已经尝试了你的代码，但似乎没有任何效果。。。看一看：@Tontcho我不知道你在哪些元素上尝试过应用我的CSS。嗨@Jon，我已经应用了你给我的CSS代码：
nav{list style:none；margin:0；padding:0；text align:center；white space:nowrap；position:fixed；width:100vh；bottom:0；right:2em；line height:2em；transform:rotation（90度）；变换原点：100%100%；}.nav li{显示：内联块；边距：0 1em；}
嗨，丹尼尔！谢谢你的帮助。您的代码似乎有奇怪的结果，请看一下：请看一下提供的代码片段，以及它在编辑器中的行为。如果看不到您的代码，就很难说还有哪些CSS干扰了您的实时站点上的代码片段。恐怕图片没用。嘿，丹尼尔，在你的代码片段中，它是有效的，但在我的实时网站中它不是。。。无论如何，非常感谢你的努力。我是css之类的业余爱好者，找不到它在干扰什么。。。我想检查一下：我在你的页面上找不到我的CSS。您的菜单具有以下CSS:
.semplice导航栏[数据导航=徽标左菜单右]导航ul、.semplice导航栏[数据导航=徽标左菜单左]导航ul、.semplice导航栏[数据导航=徽标右菜单左]导航ul、.semplice导航栏[数据导航=徽标右菜单右]导航ul、.semplice导航栏[数据导航=徽标中菜单堆叠]导航ul{显示：flex；flex-wrap:wrap；对齐内容：flex-end；填充：0；高度：100%；对齐项目：居中；}
，来自frontend-min.css