我的文字旋轉了，但背景圖片卻沒有

Question

我正在創建一個垂直菜單，我可以使文本以正確的方式旋轉，但是我的圖像（垂直圖像）似乎是水平的。

想要我有：

想要我想要：

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>

我是否以錯誤的方式處理此問題？ 我不知道問題是什么。 下面提供的解決方案不會轉動圖像。

Answer 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*/
}