html - テキストは回転するが、背景画像は回転しない

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>

私はこれに間違った方法でアプローチしていますか? 何が問題なのかわからない。以下に示す解決策では、画像は変わりません。