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

Question

我想制作这个菜单，每个字段都有垂直和90度旋转的文字。我怎么能这样做？

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

请帮帮我。

Answer 1

您可以查看writing-mode

codepen to play with

admin@project-name.appspotmail.com

project-id

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);
}

然后通过在每个元素中对每个元素进行区分来将此属性应用于要旋转的每个元素。