如何使用CSS旋转导航栏中的元素? [英] How can I rotate the elements in my navbar using CSS?

问题描述

我正在尝试使导航栏在WordPress网站中旋转，但是无法使其居中并靠近屏幕左侧.

I am trying to have my navbar rotate in my WordPress website but can't achieve to have it centered and closed to the left side of the screen.

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

This is a screenshot of what I got right now:

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

This is the code CSS I'm using:

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

推荐答案

这是一种干净的方法，可将其粘贴在页面的一侧.

Here's a clean way to do it and have it stick to the side of the page.

相关位的逐行细分(下面是完整的实时演示):

Line-by-line breakdown of relevant bit (full live demo below):

/* fix the bar */
position: fixed;
/* since we're rotating, set its width to the screen height */
width: 100vh;
bottom: 0;
/* push our bar into the screen by its height (2em) */
right: 2em;
line-height: 2em;
/* rotate 90deg clockwise */
transform: rotate(90deg);
/* use the bottom-right as rotation point */
transform-origin: 100% 100%;

.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: rotate(90deg);
  transform-origin: 100% 100%;
}

.nav li {
  display: inline-block;
  margin: 0 1em;
}

<ul class="nav">
  <li>Page 1</li>
  <li>Page 2</li>
  <li>Page 3</li>
  <li>Page 4</li>
</ul>

这篇关于如何使用CSS旋转导航栏中的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！