使用CSS转换的UL>Li垂直按钮列表:旋转
使用CSS转换的UL>Li垂直按钮列表:旋转
提问于 2021-06-13 10:13:49
我试图在菜单栏ul>li>a标签中创建一个按钮/链接列表，使用纯CSS3 transform: rotate，如下图所示。
为此，我尝试了下面的代码。
<ul class="nav">
<li class=""><a href="#tab-1">General Info</a></li>
<li class=""><a href="#tab-2">Sites/Locations</a></li>
<li class=""><a href="#tab-3">Contacts</a></li>
<li class=""><a href="#tab-4">Registration</a></li>
<li class=""><a href="#tab-5">Affiliations</a></li>
<li class=""><a href="#tab-6">Bank Details</a></li>
<li class=""><a href="#tab-7">Finances</a></li>
<li class=""><a href="#tab-8">Notifications</a></li>
<li class=""><a href="#tab-9">Documents</a></li>
<div class="clear"></div>
</ul>CSS
.nav {
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
border-bottom: 1px solid #ddd;
background:#FF0000;
}
.nav > li > a {
float: left;
line-height: 1.42857143;
padding: 10px;
border-radius: 5px 5px 0 0;
z-index: 1;
order: 1;
display: block;
cursor: pointer;
transition: background ease 0.2s;
border: 1px solid #CCCCCC;
border-bottom: none;
padding: 5px 10px;
font-size: 10px;
line-height: 1.71428571;
font-weight: 400;
background: #f7fafc;
text-decoration: none;
white-space: nowrap;
color: #ADADAD;
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform-origin: left bottom;
height: 20px;
width: 80px;
margin: 0 0 -15px -75px;
}您可以在JSFIDDLE现场看到，我面临的问题是垂直设置列表的位置到它们原来的位置，而这个位置目前还没有发生。你能帮我解决这个问题吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-06-13 10:38:39
使用writing-mode
.nav {
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
border-bottom: 1px solid #ddd;
background: #FF0000;
}
.nav>li>a {
float: left;
margin-right: 2px;
line-height: 1.42857143;
padding: 10px;
border-radius: 0 0 5px 5px;
z-index: 1;
order: 1;
display: block;
cursor: pointer;
transition: background ease 0.2s;
border: 1px solid #CCCCCC;
border-top: none;
margin: 0 0 -1px 5px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.71428571;
font-weight: 400;
background: #f7fafc;
text-decoration: none;
white-space: nowrap;
color: #ADADAD;
writing-mode: vertical-lr;
text-orientation: sideways;
transform: scale(-1);
height: 120px;
}<ul class="nav">
<li class=""><a href="#tab-1">General Info</a></li>
<li class=""><a href="#tab-2">Sites/Locations</a></li>
<li class=""><a href="#tab-3">Contacts</a></li>
<li class=""><a href="#tab-4">Registration</a></li>
<li class=""><a href="#tab-5">Affiliations</a></li>
<li class=""><a href="#tab-6">Bank Details</a></li>
<li class=""><a href="#tab-7">Finances</a></li>
<li class=""><a href="#tab-8">Notifications</a></li>
<li class=""><a href="#tab-9">Documents</a></li>
<div style="clear:both"></div>
</ul>
Stack Overflow用户
发布于 2021-06-13 10:21:54
您可以通过在CSS中更改以下位置来改变旋转位置
transform-origin: left bottom;transform-origin:top right;Stack Overflow用户
发布于 2021-06-13 10:25:29
你永远不会得到一致的间隔使用旋转，使用写作模式代替。
.nav {
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
border-bottom: 1px solid #ddd;
background:#FF0000;
}
.nav > li > a {
float: left;
line-height: 1.42857143;
padding: 10px;
border-radius: 5px 5px 0 0;
z-index: 1;
order: 1;
display: block;
cursor: pointer;
transition: background ease 0.2s;
border: 1px solid #CCCCCC;
border-bottom: none;
padding: 5px 10px;
font-size: 10px;
line-height: 1.71428571;
font-weight: 400;
background: #f7fafc;
text-decoration: none;
white-space: nowrap;
color: #ADADAD;
height: 80px;
width: 20px;
writing-mode: sideways-lr;
}<ul class="nav">
<li class=""><a href="#tab-1">General Info</a></li>
<li class=""><a href="#tab-2">Sites/Locations</a></li>
<li class=""><a href="#tab-3">Contacts</a></li>
<li class=""><a href="#tab-4">Registration</a></li>
<li class=""><a href="#tab-5">Affiliations</a></li>
<li class=""><a href="#tab-6">Bank Details</a></li>
<li class=""><a href="#tab-7">Finances</a></li>
<li class=""><a href="#tab-8">Notifications</a></li>
<li class=""><a href="#tab-9">Documents</a></li>
<div class="clear"></div>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67957114
复制相关文章
相似问题
腾讯云开发者
