我正在创建一个垂直菜单,我可以按正确方式旋转文本,但我的图像(垂直图像)似乎是水平的。
我想要:
我想要:
CSS代码:
.menu {
cursor: pointer;
display: inline-block;
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
writing-mode: rl-tb;
background-image:url('button.jpg');
width: 61px;
height: 205px;
}
a{
text-decoration: none;
color: #fffde5;
font-family: Gobold;
font-size: 30pt;
}
a:hover {
color: #338bb0;
}
HTML代码:
<div id="menu-box">
<a class="menu" href="#" >HOME</a>
<a class="menu" href="#" >MYSELF</a>
<a class="menu" href="#" >PORTFOLIO</a>
<a class="menu" href="#" >CONTACT ME</a>
</div>
我接近这个错误的方式吗?我不知道问题是什么。下面提供的解决方案不会转动图像。
答案 0 :(得分:1)
使用此css这将起作用
.menu {
cursor: pointer;
display: inline-block;
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
writing-mode: rl-tb;
background-image:url('button.jpg');
width: auto; /*Changed*/
height: 61px; /*Changed*/
}