html - 如何为每个项目创建一个带有垂直和 90 度旋转文本的菜单？

Question

我想做这个菜单，在每个字段中都有垂直和 90 度旋转的文本。我怎样才能做到这一点？

http://s6.picofile.com/file/8241625534/Untitled_5.jpg

请帮我。

Answer 1

你可以看看写作模式

可以玩的codepen

nav {
  float:left;
  writing-mode:tb-rl;/*IE*/
  writing-mode:vertical-lr;/* OPera/webkit*/
  writing-mode:sideways-lr;/* should be the one */      
}
li {
  display:inline-block;
}

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Clients</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</nav>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

Answer 2

在你的 CSS 文件中，创建一个像这样的类：

.rotate {
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

然后通过在每个元素中定义该类，将此属性应用于要旋转的每个元素。